使用Twitter引導的表單中的水平字段

Question

我使用Twitter引導來創建我的表單。我的目標是在表單中創建兩行（實際上更多，但我簡化它使問題變得簡單）。第一行包含三個標籤。第二行將包含三個輸入框用於獲取文本作爲輸入。

我寫了下面的代碼acheiving是：

<div class="span6" id="create_trips" > 
        <form class="form-horizontal" method='post' action=''> 
         <fieldset> 

          <legend> 
           Test 
          </legend> 
          <div class="control-group"> 
           <label class="control-label">test1</label> 
           <label class="control-label">test2</label> 
           <label class="control-label">test3</label> 
          </div> 

          <div class="control-group"> 
           <div class="controls"> 
            <input type="text" class="input-mini"> 
           </div> 
           <div class="controls"> 
            <input type="text" class="input-mini"> 
           </div> 
           <div class="controls"> 
            <input type="text" class="input-mini"> 
           </div> 
          </div>        
         </fieldset> 
        </form> 
       </div> 

但問題是，第二排是完全對齊。而我的第一排是正確的。我重視通過上面的代碼在這裏產生的電流輸出：

Answer 1

我終於解決了這個問題使用一些自定義CSS並更改HTML代碼中的類名稱。下面是HTML代碼：

<form class="form-horizontal" method='post' action=''> 
<fieldset> 
    <legend>Test</legend> 
    <div class="control-group"> 
     <label class="control-trip" style="text-align: center">test1</label> 
     <label class="control-trip" style="text-align: center">test2</label> 
     <label class="control-trip" style="text-align: center">test3</label> 
    </div> 
    <div class="control-group"> 
     <div class="control-trip"> 
      <input type="text" class="input-mini"> 
     </div> 
     <div class="control-trip"> 
      <input type="text" class="input-mini"> 
     </div> 
     <div class="control-trip"> 
      <input type="text" class="input-mini"> 
     </div> 
    </div> 
</fieldset> 

這裏是相應的CSS：

.form-horizontal .control-trip 
{ 
    text-align: center; 
    float: left; 
    width: 140px; 
    padding-top: 5px; 
} 

的解決方案是在這裏這個jsfiddle.

Answer 2

您在引導12周的cols ......因此，創建3周的cols按行類似如下：

<!-- The row --> 
<div class="row-fluid"> 
    <!-- One col --> 
    <div class="span4"> 
    <div class="control-group"> 
     <label class="control-label">test1</label> 
     <div class="controls"> 
     <input type="text" ... /> 
     </div>      
    </div> 
    </div> 

    <!-- Another col --> 
    <div class="span4"> 
    <div class="control-group"> 
     <label class="control-label">test1</label> 
     <div class="controls"> 
     <input type="text" ... /> 
     </div>      
    </div> 
    </div> 

    <!-- The last col --> 
    <div class="span4"> 
    <div class="control-group"> 
     <label class="control-label">test1</label> 
     <div class="controls"> 
     <input type="text" ... /> 
     </div>      
    </div> 
    </div> 
</div> 

<!-- Another row --> 
<div class="row-fluid"> 
    <!-- One col --> 
    <div class="span4"> 
    <div class="control-group"> 
     <label class="control-label">test1</label> 
     <div class="controls"> 
     <input type="text" ... /> 
     </div>      
    </div> 
    </div> 

    <!-- Another col --> 
    <div class="span4"> 
    <div class="control-group"> 
     <label class="control-label">test1</label> 
     <div class="controls"> 
     <input type="text" ... /> 
     </div>      
    </div> 
    </div> 

    <!-- The last col --> 
    <div class="span4"> 
    <div class="control-group"> 
     <label class="control-label">test1</label> 
     <div class="controls"> 
     <input type="text" ... /> 
     </div>      
    </div> 
    </div> 
</div>