使用 Bulma 定位元素 CSS

Question

我正在尝试使用 Bulma CSS 将一些文本与搜索栏水平居中，但结果并不如我所愿。我尝试使用柱子，但它们通常会一直拉到边缘或放置不当。我也尝试过使用级别，但它们也有我不想要的类似结果。请帮忙

这是我的代码：

  <div class="container section">
**<p> I want to make this tag to be in the same line as the search box </p>**
                 <div class="field has-addons is-pulled-right">
                    <div class="control">
                    <input class="input" type="text" placeholder="Search competition">
                      </div>
                   <div class="control">
                    <a class="button is-info">
                        Search
                    </a>
                </div>
            </div>
        </div>

我想让一些文本与容器的左侧对齐，搜索框位于该行的右侧。谢谢。

Answer 1

您能描述一下您在使用这些列时遇到的问题吗？您是否尝试在 .columns div 上使用 .is-vcentered class？

请务必全屏查看以下代码。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
  <div class="columns is-vcentered">
    <div class="column">
      <p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
    </div>
    <div class="column">
      <div class="field has-addons is-pulled-right">
        <div class="control">
          <input class="input" type="text" placeholder="Search competition">
         </div>
         <div class="control">
            <a class="button is-info">
                        Search
             </a>
         </div>
       </div>
    </div>
  </div>
</div>

或者我看到你说的是水平居中。您是否尝试过 .columns 容器上的 .is-centered class 和 .column 容器上的 .is-narrow class？

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<div class="container section">
  <div class="columns is-centered is-vcentered">
    <div class="column is-narrow">
      <p style="border: 1px solid #ccc;"> I want to make this tag to be in the same line as the search box </p>
    </div>
    <div class="column is-narrow">
      <div class="field has-addons">
        <div class="control">
          <input class="input" type="text" placeholder="Search competition">
         </div>
         <div class="control">
            <a class="button is-info">
                        Search
             </a>
         </div>
       </div>
    </div>
  </div>
</div>

使用 Bulma 定位元素 CSS

Positioning elements using Bulma CSS

html

css

bulma