Bootstrap Формы этикетка и текстовое поле расположение

Question

У меня есть следующий код:

<fieldset> 
<legend> Personal Details </legend> 
<form class =" form-inline well span9" > 

    <label> Last Name </label> 

    <input type="text" class = "span2" placeholder = "Type Last Name"/> 

    <label> Middle Name </label> 

    <input type="text" class = "span2"/> 

    <label> First Name </label> 

    <input type="text" class = "span2"/><br/> 

    <label> NickName</label> 

    <input type="text" class = "span2"/> 

    <label>Gender</label> 
      <span class="controls span2"> 
    <select id="select01" style="width:100%;"> 
     <option>Male</option> 
     <option>Female</option> 
    </select> 
    </span> 

</form> 

Что происходит, что метка для Пол появляется после ярлыка псевдонима и текстового поля. Может кто-нибудь объяснить, как решить эту проблему?

Спасибо.

Answer 1

Вы можете создать свою форму в вопросе следующим образом:
Вот jsfiddle для http://jsfiddle.net/shail/sGgKE/

Jsfiddle с формой 3 колонков http://jsfiddle.net/shail/ykpr5/show

Изменить: По запросу в комментарии: формы Три колонок с начальной загрузкой

<form class="well span9"> 
<div class="row"> 
    <div class="span3"> 
     <label>First Name</label> 
     <input type="text" class="span3" placeholder="Your First Name"> 
     <label>Last Name</label> 
     <input type="text" class="span3" placeholder="Your Last Name"> 
    </div> 
    <div class="span3"> 
     <label>Nickname</label> 
     <input type="text" placeholder="Nickname" class="span3"> 
     <label>Email Address</label> 
     <input type="text" class="span3" placeholder="Your email address"> 
    </div> 
    <div class="span3"> 
     <label>Gender</label> 
     <select name="Gender" id="DropdownGender" class="span3"> 
      <option value="">Male</option> 
      <option value="">Female</option> 
     </select> 
    </div> 
</form> 

Регулярное выравнивание формы

<div class="well span9"> 
<form id="form-inline"> 
    <fieldset> 
     <legend>Personal Details</legend> 
     <label>Last name</label> 
     <input type="text" placeholder="Smith" class="input-xlarge"> 
     <label>Middle Name</label> 
     <input type="text" placeholder="K" class="input-xlarge"> 
     <label>First Name</label> 
     <input type="text" placeholder="John" class="input-xlarge"> 
     <label>Nickname</label> 
     <input type="text" placeholder="Nickname" class="input-xlarge"> 
     <label>Gender</label> 
     <select name="Gender" id="DropdownGender" class="input-xlarge"> 
      <option value="">Male</option> 
      <option value="">Female</option> 
     </select> 
    </fieldset> 
</form> 
</div>