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