如何正確對齊標籤並輸入Twitter引導程序？

Question

我使用Twitter的引導3，想右對齊下面的表格看起來像這樣的提琴手http://jsfiddle.net/WX58z/8/

<form class="form-horizontal"> 
    <div class="block" > 
     <label class="cinfo">Card Type </label> 
     <select ng-model="cardtype" ng-change="selectCardType(cardtype)" ng-options="c.type for c in card" class="ng-pristine ng-valid"></select> 
    </div> 
    <div class="block"> 
     <label class="cinfo" >Card Number</label> 
     <input id="cardnumber" ng-model="MarvPayer.cardnumber"/> 
    </div> 
    <div class="block"> 
     <label class="cinfo">First Name </label> <input id="fname" ng-model="MarvPayer.fname"/> 
    </div> 
</form> 

Answer 1

您將使元素inline-block然後給input/select元素的像的寬度70%。 label元素應該填充剩餘空間，因此給它們一個寬度30%。將一個可選的padding-right值添加到label元素並將其對齊到右側。

EXAMPLE HERE

.form-horizontal input, .form-horizontal select { 
    display:inline-block; 
    width:70%; 
    padding-right:10px; 
} 
.form-horizontal label { 
    display:inline-block; 
    text-align:right; 
    width:30%; 
    padding-right:12px; 
} 

不像浮動元素，這是值得注意的是inline元件尊重該標記的白空間。您需要將其刪除以確保計算總計爲100%。請參閱this answer。

---

或者，而不是使用自定義的CSS，你也可以採取一些自舉類的優勢..

下面是一個例子使用您提供的HTML：

FULL SCREEN EXAMPLE HERE

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label class="cinfo cinfo col-sm-2 control-label">Card Type </label> 
     <div class="col-sm-6"> 
     <select ng-model="cardtype" ng-change="selectCardType(cardtype)" ng-options="c.type for c in card" class="ng-pristine ng-valid form-control"></select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="cinfocinfo col-sm-2 control-label" >Card Number</label> 
     <div class="col-sm-6"> 
     <input id="cardnumber" class="form-control" ng-model="MarvPayer.cardnumber"/> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="cinfo col-sm-2 control-label">First Name </label> 
     <div class="col-sm-6"> 
     <input id="fname" class="form-control" ng-model="MarvPayer.fname"/> 
     </div> 
    </div> 
</form>