Twitter Bootstrap横型

Question

フィールドが水平でラベルはフィールドの上にあるブートストラップを使用してフォームを作成しようとしています。私が持っているHTMLは、これは

ように見える。しかし、私がしたいことは何Twitterのブートストラップのマジック

のようなものであるフォームを生成

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

     <label>Firstname</label><input class="span12" type="text"> 
     <label>Surname</label><input class="span12" type="text"> 

     <label for="PhoneNumber">Phone Number</label><input id="PhoneNumber" class="span6" type="text"> 
     <label for="MobilePhone">Mobile Phone</label><input id="MobilePhone" class="span6" type="text"> 

     <label>Email Address</label><input class="span12" type="text"> 

    </fieldset> 
    <fieldset class="span6"> 
     <legend>Address Details</legend> 
    </fieldset> 
</form> 

ですこれが必要ですか？

Answer 1

私は自分自身の問題を解決するように見えます。 HTMLを

に変更しました。

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

     <label>Firstname</label><input class="span12" type="text"> 

     <label>Surname</label><input class="span12" type="text"> 

     <div class="controls-row"> 
      <div class="control-group span6"> 
       <label for="PhoneNumber">Phone Number</label> 
       <input id="PhoneNumber" class="span12" type="text"> 
      </div> 
      <div class="control-group span6"> 
       <label for="MobilePhone">Mobile Phone</label> 
       <input id="MobilePhone" class="span12" type="text"> 
      </div>       
     </div> 

     <label>Email Address</label><input class="span12" type="text"> 

    </fieldset> 
    <fieldset class="span6"> 
     <legend>Address Details</legend> 
    </fieldset> 
</form>