使用Twitter引導對齊按鈕引導

Question

我想在Bootstrap中正確工作。我一直在尋找http://getbootstrap.com/css/#type-emphasis，我也試過http://getbootstrap.com/components/#navbar-component-alignment，但我無法得到我想到的效果。

這是我使用的代碼：

<h1>{% trans %} x {% endtrans %} <small>{% trans %} yw {% endtrans %}</small></h1> 

<input class="form-control" type="text"> 
<button type="button" class="btn btn-primary custom-button-width">{{ icon('plus') }} {% trans %} z1 {% endtrans %}</button> 
<button type="button" class="btn btn-warning custom-button-width .navbar-right">{{ icon('edit') }} {% trans %} z2 {% endtrans %}</button> 
<button type="button" class="btn btn-danger custom-button-width .navbar-right">{{ icon('remove') }} {% trans %} z3 {% endtrans %}</button> 

<br /> 
<br /> 

<table class="table table-hover"> 
... 

的這個實際效果的下面是一個例子，還有就是我想要的目的。

任何想法表示讚賞 - 感謝。

Answer 1

由於您使用的是custom-button-width類，因此您還可以使用.custom-input-width類來設置輸入的寬度。然後創建2列和右對齊右邊按鈕...

.custom-input-width { 
    width:150px; 
    margin-right:3px; 
} 

演示：http://bootply.com/ldT3sINLlz

Answer 2

斯凱利是正確的，但如果可能，我願意解決這樣的問題，內置的功能，Twitter的引導。拉右輔助類是很重要的位置：

漂浮輔助類文檔：http://getbootstrap.com/css/#helper-classes-floats

其他twbs3功能，我經常使用的是網格系統：

網格系統文件：http://getbootstrap.com/css/#grid

隨着你可以做到這一點：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6 col-sm-6"> 
      <button type="button" class="btn btn-primary">1</button> 
      <button type="button" class="btn btn-primary">2</button> 
     </div> 
     <div class="col-md-6 col-sm-6 clearfix"> 
      <div class="pull-right"> 
       <button type="button" class="btn btn-primary">3</button> 
       <button type="button" class="btn btn-primary">4</button> 
      </div> 
     </div> 
    </div> 
</div> 

這裏是jsfiddle：http://jsfiddle.net/kY2cb/1/