2013-05-28 2 views
5

필드가 수평이지만 레이블이 필드 위에있는 부트 스트랩을 사용하여 양식을 만들려고합니다. 내가 가지고있는 HTML이 보이는 형태를 생산Twitter Bootstrap 가로형 양식

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

입니다

No good form

하지만 내가 원하는 것은

Good form

같은 무엇 트위터 부트 스트랩 마법을 보이는 뭔가 같은 나는 이것을 위해 필요합니까?

답변

10

나는 내 자신의 문제를 해결할 수있는 것처럼 보입니다. 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>