[英]How to right align labels and input Twitter bootstrap?
I am using Twitter bootstrap 3 and would like to right-align the following form to look like this fiddler http://jsfiddle.net/WX58z/8/ 我正在使用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>
You would make the elements inline-block
and then give the input
/ select
elements a width of something like 70%
. 您可以将元素设置为inline-block
,然后将input
/ select
元素的宽度设置为70%
。 The label
elements should fill the remaining space, therefore give them a width of 30%
. label
元素应填充剩余空间,因此将其宽度设置为30%
。 Add an optional padding-right
value to the label
element and align it to the right. 将可选的padding-right
值添加到label
元素,并将其向右对齐。
.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;
}
Unlike floating elements, it's worth noting that inline
element respect the white-space in the markup. 与浮动元素不同,值得注意的是, inline
元素尊重标记中的空白。 You would need to remove this to ensure that the calculations add up to 100%
. 您将需要删除它以确保计算的总和为100%
。 See this answer . 看到这个答案 。
Alternatively, instead of using custom CSS, you could also take advantage of some bootstrap classes.. 另外,也可以不使用自定义CSS,而可以利用一些引导程序类。
Here is an example using the HTML you provided: 这是使用您提供的HTML的示例:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.