Bulma: horizontale Formularsteuerelemente nicht richtig erweitert

Question

Ich habe einen Text eingeben und 2 wählt, dass ich sie horizontal legen möchte. basierend auf bulma CSS-Framework, dass das, was ich angeblich zu tun: sollte

<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> 

normalerweise die letzten 2 wählt ihre wahre Breite nehmen und den ersten Eingang sollte erweitern, bis es den verfügbaren Platz in Anspruch nimmt, aber das ist, was ich erhalte:

Answer 1

hinzufügen is-narrow auf die Felder, die Sie eng sein wollen:

<div class="field is-narrow"> 

Arbeitsbeispiel: https://jsfiddle.net/wostex/ut4nedq2/

Answer 2

Sie müssen control is-expanded mit select is-fullwidth kombinieren.

Hier ein Beispiel:

@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>