bulma：水平表单控件未正确展开答案

【问题标题】：bulma: horizontal form controls not expanded correctlybulma：水平表单控件未正确展开
【发布时间】：2017-07-05 18:54:55
【问题描述】：

我有一个文本输入和两个选择，我想将它们水平放置。基于bulma css框架，我应该做的：

<div class="field is-horizontal">
  <div class="field-body">
     <div class="field">
        <p class="control is-expanded has-icons-left">
           <input class="input" type="text" placeholder="Search" name="id" id="id">
           <span class="icon is-small is-left"><i class="fa fa-search"></i></span>
        </p>
     </div>
     <div class="field">
        <p class="control">
           <span class="select">
              <select name="status" id="status">
                 <option value="">Status:</option>
                 <option value="active">active</option>
                 <option value="pause">pause</option>
              </select>
           </span>
        </p>
     </div>
     <div class="field">
        <p class="control">
           <span class="select">
              <select name="limit" id="limit">
                 <option value="">Limits:</option>
                 <option value="10">10</option>
                 <option value="20">20</option>
              </select>
           </span>
        </p>
     </div>
  </div>

通常最后 2 个选择应该采用它们的实际宽度，第一个输入应该扩展直到它占用可用空间，但这就是我得到的：

【问题讨论】：

标签： html css bulma

【解决方案1】：

您需要将control is-expanded 与select is-fullwidth 结合起来。

这是一个例子：

@import url('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css');

<div class="field is-horizontal">
  <div class="field-body">
     <div class="field">
        <p class="control is-expanded has-icons-left">
           <input class="input" type="text" placeholder="Search" name="id" id="id">
           <span class="icon is-small is-left"><i class="fa fa-search"></i></span>
        </p>
     </div>
     <div class="field">
        <p class="control is-expanded">
           <span class="select is-fullwidth">
              <select name="status" id="status">
                 <option value="">Status:</option>
                 <option value="active">active</option>
                 <option value="pause">pause</option>
              </select>
           </span>
        </p>
     </div>
     <div class="field">
        <p class="control is-expanded">
           <span class="select is-fullwidth">
              <select name="limit" id="limit">
                 <option value="">Limits:</option>
                 <option value="10">10</option>
                 <option value="20">20</option>
              </select>
           </span>
        </p>
     </div>
  </div>

【讨论】：

【解决方案2】：

将is-narrow添加到您想要缩小的字段：

<div class="field is-narrow">

工作示例：https://jsfiddle.net/wostex/ut4nedq2/

【讨论】：