Bulma CSS - 输入框中的按钮

Question

我正在使用Bulma框架，如何将按钮与输入框放在同一行？目前看起来输入框的宽度是全屏的。

我的代码：

<div class="container">
<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input type="text" class="input is-info is-large" placeholder="Input number in seconds">
    <span class="icon is-medium is-left">
      <i class="fa fa-futbol-o"></i>
    </span>
  </div>      
</div>
<a class="button is-info">GO</a>

结果 结果图片

- Tindecken

Answer 1

如果您想要将按钮放置在输入框右侧而不是内部， 您可以使用 has-addons 类将控件（此处为输入框和按钮）“合并”如下：

http://bulma.io/documentation/form/general/#form-addons

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="field has-addons">
    <div class="control has-icons-left">
      <input type="text" class="input is-info is-large" placeholder="Input number in seconds">
      <span class="icon is-medium is-left">
        <i class="fa fa-futbol-o"></i>
      </span>
    </div>
    <div class="control">
        <a class="button is-info is-large">GO</a>
    </div>
  </div>
</div>

- user404

Answer 2

以下是需要翻译的内容：

以下是如何创建一个搜索输入框，使其占据整个宽度，并且在右侧放置一个按钮，两者之间没有任何空隙（基本上是来自user404和Sébastien的答案混合在一起）

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="field has-addons">
    <div class="control has-icons-left has-icons-right is-expanded">
        <input type="text" class="input is-info is-large" placeholder="Enter words to search">
        <span class="icon is-medium is-left">
          <i class="fa fa-pencil"></i>
        </span>
    </div>
    <p class="control">
        <a class="button is-info is-large">SEARCH</a>
    </p>
</div>

- mrmuggles

Answer 3

https://bulma.io/documentation/form/general/#form-addons

或者，您只需将字段和按钮分组，并在“field”元素中添加“is-grouped”类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

        <div class="field is-grouped">
            <div class="control has-icons-left has-icons-right is-expanded">
                <input type="text" class="input is-info is-large" placeholder="Input number in seconds">
                <span class="icon is-medium is-left">
                  <i class="fa fa-futbol-o"></i>
                </span>
            </div>
            <p class="control">
                <a class="button is-info is-large">GO</a>
            </p>
        </div>

- Sébastien Conejo