ट्विटर बूटस्ट्रैप क्षैतिज रूप

Question

मैं बूटस्ट्रैप का उपयोग करके एक फॉर्म बनाने की कोशिश कर रहा हूं जहां फ़ील्ड क्षैतिज हैं लेकिन लेबल फ़ील्ड से ऊपर हैं। एचटीएमएल मेरे पास है

<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

ऐसा लगता है कि मैंने अपनी समस्या हल करने में कामयाब रहे। एचटीएमएल

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

में बदल गया