bootstrap水平對齊元素

Question

我有一個關於Bootstrap Grid的簡單問題。

如果我有以下代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-2"> 
        Some header here 
       </div> 
       <div class="col-md-8"> 
        <input type="text" class="input-small" /> 
        <input type="submit" value="ok" /> 
       </div> 
      </div> 
     </div> 
    </div>   
</div> 

你怎麼會拉inputfield向左邊，所以它具有約5px的保證金到我的「標題」文本？

我的文本div顯然有一個寬度，所以我不能只把輸入拉近文本。 我可以將類更改爲col-md-1，但隨後我的文本將被強制在兩行上。

我在這裏設置了一個小提琴： http://jsfiddle.net/62kLr/ 您可能需要調整窗口大小，以正確查看對齊。

/BR 馬丁

Answer 1

你可以使用一個label，而不是單獨的列...

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-10"> 
        <label>Some header here</label> 
        <input type="text" class="input-small"> 
        <input type="submit" value="ok"> 
       </div> 
      </div> 
     </div> 
    </div>   
</div> 

http://www.bootply.com/117582

Answer 2

嘗試使用網格山坳-SM-2，COL-XS-2的功能。

<div class="container"> 
<div class="row"> 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
     <div class="row"> 
      <div class="col-md-3 col-sm-3 col-xs-3"> 
       Some header here 
      </div> 
      <div class="col-md-9 col-sm-9 col-xs-9"> 
       <input type="text" class="input-small" /> 
     <input type="submit" value="ok" /> 
      </div> 
     </div> 
    </div> 
    </div>   
</div>