表格对齐在自举3

Question

我在自举3以下HTML给出以下显示：

它如下的HTML。

在一行中，我只有一个字段，而在其他字段中，我有3.是否可以使用引导使所有行在同一位置上放置“第一个”标签？在这种情况下，“项目名称”，“位置”和“项目价值”将对齐在同一位置。

感谢

<div class="container"> 
    <div class="row" id="mainForm"> 
     <form class="form-horizontal"> 
       <div class="row"> 
        <div class="form-group col-xs-12 col-sm-6"> 
         <label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label> 
         <div class="col-sm-8 col-xs-9"> 
          <input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="form-group col-xs-12 col-sm-6"> 
         <label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label> 
         <div class="col-sm-8 col-xs-9"> 
          <input type="text" class="form-control" id="txtLocation" placeholder="Location"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="form-group col-xs-12 col-sm-4"> 
         <label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label> 
         <div class="col-sm-8 col-xs-9"> 
          <input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)"> 
         </div> 
        </div> 
        <div class="form-group col-xs-12 col-sm-4"> 
         <label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label> 
         <div class="col-sm-8 col-xs-9"> 
          <input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)"> 
         </div> 
        </div> 
        <div class="form-group col-xs-12 col-sm-4"> 
         <label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label> 
         <div class="col-sm-8 col-xs-9"> 
          <input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency"> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-xs-offset-2 col-xs-10"> 
         <button type="submit" class="btn btn-primary">Login</button> 
        </div> 
       </div> 
      </form> 
    </div> 
    <div class="row top-buffer"> 
    </div> 
</div> 

Answer 1

在前两个div.row你.form-group与.col-sm-6。如果您将其更改为.col-sm-4，您将获得所需的对齐方式。

例如为：

<div class="col-xs-12 col-sm-4"> 
    <div class="form-group"> 
     <label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label> 
     <div class="col-sm-8 col-xs-9"> 
     <input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project"> 
     </div>   
    </div> 
</div> 

这里是一个工作演示http://jsfiddle.net/wmyuj7gy/。

编辑：

如果你想前两排是全宽您需要更改.col-sm-4到.col-sm-12和内部元素，从而让.col-sm-1和.col-sm-11类。

此外，您应该使用.form-group类在div与.col-sm-*类相同，因为是与网格的填充混乱。

这里是你的代码的固定例如，同样在最后一排一些其他的变化，使完全对齐http://jsfiddle.net/wmyuj7gy/3/

Answer 2

尝试，形式是一个 -

<form class="form-horizontal"> 
      <div class="row"> 
       <div class="form-group col-xs-12 col-sm-4"> 
        <label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label> 
        <div class="col-sm-8 col-xs-9"> 
         <input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project"> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="form-group col-xs-12 col-sm-4"> 
        <label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label> 
        <div class="col-sm-8 col-xs-9"> 
         <input type="text" class="form-control" id="txtLocation" placeholder="Location"> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="form-group col-xs-12 col-sm-4"> 
        <label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label> 
        <div class="col-sm-8 col-xs-9"> 
         <input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)"> 
        </div> 
       </div> 
       <div class="form-group col-xs-12 col-sm-4"> 
        <label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label> 
        <div class="col-sm-8 col-xs-9"> 
         <input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)"> 
        </div> 
       </div> 
       <div class="form-group col-xs-12 col-sm-4"> 
        <label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label> 
        <div class="col-sm-8 col-xs-9"> 
         <input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency"> 
        </div> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-xs-offset-2 col-xs-10"> 
        <button type="submit" class="btn btn-primary">Login</button> 
       </div> 
      </div> 
     </form>