html - 如何右对齐标签并输入 Twitter bootstrap？

Question

我正在使用 Twitter bootstrap 3 并希望右对齐以下表单以使其看起来像这个 fiddler 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;
}

与 float 元素不同，值得注意的是 inline 元素尊重标记中的空白。您需要删除它以确保计算总和为 100%。参见 this answer .

---

或者，除了使用自定义 CSS，您还可以利用一些 Bootstrap 类。

这是一个使用您提供的 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>