表格對齊在自舉3

我在自舉3以下HTML給出以下顯示： enter image description here 表格對齊在自舉3

它如下的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>

來源

2014-08-30 Bill

在前兩個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/

來源

2014-08-30 10:31:50

如果我想拍「項目名稱「輸入字段跨越所有行？ – Bill 2014-08-30 10:38:20

我更新了我的答案 – 2014-08-30 10:48:57

Hi Tasos，我注意到了一件事。當放置在「.col-sm-12」列中時，具有「.col-sm-1」的標籤不同於放置在「.col-sm-1」列中的具有「.col-sm-1」 4「，就像單行和上面有3列的行一樣。爲了適應上述標籤，我必須將行中的標籤與3列一起放入「.col-sm-3」中。任何想法？ – Bill 2014-09-01 06:26:19

嘗試，形式是一個 -

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

來源

2014-08-30 10:32:36

表格對齊在自舉3

回答

相關問題