2015-01-12 7 views
1

Мне трудно помещать два и один ввод текста в одну строку в моей форме. Я могу получить два выбора inline, но ввод текста упрям. Вот как это выглядит с текущим кодом:Bootstrap несколько входов inline

enter image description here

<form role='form' action='#' method='post'> 
    <div class='form-group'> 
     <label for='query-bar' class='sr-only'></label> 
     <input type='text' class='form-control' placeholder='Enter search query..' name='query-bar' /> 
    </div> 
    <div class='form-inline'> 
     <div class='form-group'> 
      <select name='builder-columns' class='form-control'> 
       <option selected disabled value='none'>Columns</option> 
       <option></option> 
      </select> 
     </div> 
     <div class='form-group'> 
      <select name='builder-operators' class='form-control'> 
       <option selected disabled value='none'>Operators</option> 
      </select> 
     </div> 
     <div class='form-group'> 
      <label for='builder-filter' class='sr-only'></label> 
      <input type='text' placeholder='Filter' name='builder-filter' class='form-control' /> 
     </div> 
    </div> 
</form> 

ответ

1

Вы можете использовать следующее:

<div class='form-inline row'> 
    <div class='form-group col-sm-4'> 
     <select name='builder-columns' class='form-control'> 
      <option selected disabled value='none'>Columns</option> 
     </select> 
    </div> 
    <div class='form-group col-sm-4'> 
     <select name='builder-operators' class='form-control'> 
      <option selected disabled value='none'>Operators</option> 
     </select> 
    </div> 
    <div class='form-group col-sm-4'> 
     <label for='builder-filter' class='sr-only'></label> 
     <input type='text' placeholder='Filter' name='builder-filter' class='form-control' /> 
    </div> 
</div> 
.form-inline .form-control { 
    width: 100%; 
} 

Класс row был добавлен к form-inline элементов, и класс col-sm-4 был добавлен в form-group eleme NTS. Кроме того, ширина элементов .form-control была установлена ​​на 100%, чтобы перезаписать width: auto, который применяется при определенных размерах экрана.

Example Here

Смежные вопросы