为什么我的Bootstrap输入无法正确对齐? [英] Why does my Bootstrap input not align right?
问题描述
为什么我的Bootstrap输入不正确对齐(=>参见第三个输入,占位符='不正确对齐')?
td表元素的样式定义了对齐方式... < br>
在设置输入样式text-align = right时从td元素中删除样式元素时,它仍然保持左对齐。
Why does my Bootstrap input not align right (=> see 3rd input with placeholder='Does not align right')?
The td table element has a style which defines the alignment...
When I remove the style element from the td element at set the input style text-align=right, it is still left aligned.
<div class="row">
<div class="col-md-6">
<div class="well" style="width:840px">
<table class='table borderless' style="width:800px">
<tr>
<td colspan="2">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
</td>
</tr>
<tr>
</table>
</div>
</div>
</div>
推荐答案
为什么我的Bootstrap输入不正确吗?
Why does my Bootstrap input not align right?
因为 .form-control
将具有显示:来自bootstrap.min.css的阻止
。作为证明,如果再次使它成为 inline-block
,它将起作用:
Because .form-control
will have display: block
from bootstrap.min.css. As proof of this, if you make it an inline-block
again it'll work:
.form-control { display: inline-block !important; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="well" style="width:840px">
<table class='table borderless' style="width:800px">
<tr>
<td colspan="2">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
</td>
</tr>
<tr>
</table>
</div>
</div>
</div>
您可能会做什么真正想要的是控件立即具有这种行为。为此,请确保使用Bootstrap的 form-inline
,例如像这样:
What you probably really want is your controls to behave like that straight away. To do so make sure to utilize Bootstrap's form-inline
, e.g. like this:
<div class="row form-inline">
请注意,这也会影响输入的第一行。如果将 form-inline
移到另一个位置,则可以选择防止这种情况发生。
Note that this affects the first row of inputs too. If you move the form-inline
to a another spot you could choose to prevent that from happening.
这篇关于为什么我的Bootstrap输入无法正确对齐?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!