bulma: элементы управления горизонтальной формой развернуты неправильно

У меня есть один текстовый ввод и 2 выбора, которые я хочу поместить их горизонтально. на основе структуры 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>

normally the last 2 selects should take their real width and the first input should expand until it takes the available space, but this is what i'm getting:

введите здесь описание изображения


html css bulma
person YouneL    schedule 05.07.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Добавьте is-narrow к полям, которые вы хотите сузить:

<div class="field is-narrow">

Рабочий пример: https://jsfiddle.net/wostex/ut4nedq2/

person Egor Stambakio    schedule 05.07.2017

arrow_upward
6
arrow_downward

Вам нужно объединить 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>

person DavidDomain    schedule 05.07.2017