Twitter Bootstrap - 帶有FieldSet每列的水平表單

Question

我有一個表單，每個集合中有兩個fieldset和兩個元素。我想佈置表單，以便每個字段集顯示爲一列。

我遇到了這個jsfiddle，它顯示了一個帶有單個字段集和五個元素的表單，這兩個元素分爲兩列，但我無法調整自己的表單以正確呈現。

我是否需要將特定類屬性添加到fieldset元素以進行引導，以將它們作爲列進行處理？

<div class="container"> 
    <form class="form-horizontal"> 
    <fieldset> 
     <legend>Portfolio A</legend> 
     <div class="col-xs-6"> 
      <div class="form-group"> 
       <label for="name" class="col-xs-4 control-label">Label A1</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control" placeholder="control1" /> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="name" class="col-xs-4 control-label">label A2</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control" placeholder="control2" /> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
    <fieldset> 
     <legend>Portfolio B</legend> 
     <div class="col-xs-6"> 
      <div class="form-group"> 
       <label for="name" class="col-xs-4 control-label">Label B1</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control" placeholder="control1" /> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="name" class="col-xs-4 control-label">label B2</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control" placeholder="control2" /> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
</form> 
</div> 

Answer 1

您應該在fieldset中添加額外的類，然後在其中更改div的類名稱。

Working Demo

從這個

<fieldset> 
     <legend>Portfolio A</legend> 
     <div class="col-xs-6"> 
     ... 

更改爲此

<fieldset class="col-xs-6"> 
     <legend>Portfolio A</legend> 
     <div class="col-xs-12"> 
     ... 

我已經加入到col-xs-6 FIELDSET和col-xs-12客棧呃div。

Answer 2

您正在將<fieldset>定義爲您的列的周圍塊元素。這樣列級聯將無法工作。嘗試更合乎邏輯的方法：首先定義列框架並在其內部定義您的字段集。

<div class="container"> 
    <form class="form-horizontal"> 
     <div class="col-xs-6"> 
      <fieldset> 
      .... 

這種方式它應該像你想要的那樣工作。這是一個快速的jsfiddle。