Bootstrap: встроенная форма с заголовками

Question

Я пытаюсь создать встроенную форму, которая редактируется внутри Bootstrap. Кажется, я не могу получить контроль над макетом при использовании рядов жидкости, и мне нужны заголовки наверху, и я не могу понять, как правильно это сделать.

Я расколол jsfiddle, который иллюстрирует идею. Как вы можете видеть перекрытие элементов управления, которое не очень велико. Первоначально перед встроенной формой я пытался использовать таблицу, но обнаружил, что различные входные элементы управления в действительности не были в восторге.

<div id="wrapper" class="container-fluid"> 
<div class="row-fluid"> 
<form id="frmOptions" method="post" class="well form-inline span12"> 

    <div class="row-fluid"> 
     <div id="formLeft" class="span3"> 
      <div class="control-group"> 
      <label for="select1" class="control-label">Option 1:</label> 
      <div class="controls"> 
       <select id="select1"> 
        <option>Something</option> 
       </select> 
        <select id="select1"> 
        <option>Something</option> 
       </select> 
      </div>  
      </div> 
     </div> 

     <div id="formCenter" class="span3"> 
      <div class="control-group"> 
      <label for="select2" class="control-label">Option 2:</label> 
      <div class="controls"> 
       <select id="select2"> 
        <option>Something</option> 
       </select> 
       <select id="select2"> 
        <option>Something</option> 
       </select> 
      </div>  
      </div>  
     </div> 

     <div id="formRight" class="span3"> 
      <div class="control-group"> 
      <label for="select3" class="control-label">Option 3:</label> 
      <div class="controls"> 
       <select id="select3"> 
        <option>Something</option> 
       </select> 
       <select id="select3"> 
        <option>Something</option> 
       </select> 
      </div>  
      </div>  
    </div> 

</form> 
</div> 
</div> 

Есть ли у кого-нибудь предложения, как это исправить? Я использую bootstrap selectors http://silviomoreto.github.com/bootstrap-select/, если это необходимо, но я еще не пробовал их.

Answer 1

Добавьте span12 класс в <select> Элементы: http://jsfiddle.net/kaleb/CdNef/244/

Это исправление перекрытия. Надеюсь, это то, что вы ищете.

Answer 2

Вы можете сделать следующее, чтобы сделать ваши полей выбора по своему желанию:

JSfiddle Demo

.form-inline select { 
margin-bottom:10px; 
} 
@media (min-width: 768px) and (max-width: 979px) { 
#frmOptions select { 
    width:100%; 
    } 
    } 
@media (max-width: 767px) { 
#frmOptions select { 
    width:100% 
    } 
    } 
@media (max-width: 480px) { 
    #frmOptions select { 
    width:100%; 
    } 
    } 

BTW Я думаю, вы могли бы создать форму таким способом, а также, может помочь Я. позже

form jsfiddle