Question

我正在使用Twitter bootstrap 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>

如何正确对齐标签并输入Twitter引导程序？

1 个答案: