Html 为什么我的 Bootstrap 输入没有正确对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29676808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does my Bootstrap input not align right?
提问by udgru
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.
为什么我的 Bootstrap 输入没有正确对齐（=> 使用 placeholder='Does not align right' 查看第三个输入）？
td 表元素具有定义对齐方式
的样式...当我从设置输入样式 text-align=right 的 td 元素中删除样式元素时，它仍然是左对齐的。
<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>
回答by Jeroen
Why does my Bootstrap input not align right?
为什么我的 Bootstrap 输入没有正确对齐？
Because .form-controlwill have display: blockfrom bootstrap.min.css. As proof of this, if you make it an inline-blockagain it'll work:
因为.form-control会有display: block来自 bootstrap.min.css。作为证明，如果您inline-block再次使用它，它将起作用：
.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>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:
您可能真正想要的是您的控件立即表现得如此。为此，请确保使用 Bootstrap 的form-inline，例如：
<div class="row form-inline">
Note that this affects the first row of inputs too. If you move the form-inlineto a another spot you could choose to prevent that from happening.
请注意，这也会影响第一行输入。如果您将 移动form-inline到另一个位置，您可以选择防止这种情况发生。
回答by hungerstar
That's because your input has it's displayproperty set to blockvia the .form-controlclass. Block level elements will take up the whole width of their containing element. Even if a width is set, the remaining space is taken up by margin.
那是因为您的输入通过类display将其属性设置为。块级元素将占据其包含元素的整个宽度。即使设置了宽度，剩余空间也会被边距占用。block.form-control
To get the input to align the way you would like change the displayvalue to inline-blockor add the class .pull-rightto the input.
要使输入以您希望将display值更改为inline-block或将类添加.pull-right到输入的方式对齐。
.form-control {
display: inline-block;
}
<input type="text" class="form-control input-sm pull-right">
回答by Mahmoud
Twitter Bootstrap specially set width: 100%property to the .form-controlto make the life easier and handle such things with Grid system
Twitter Bootstrap 专门为 设置了width: 100%属性，.form-control使生活更轻松，并使用Grid 系统处理此类事情
You can go with the following solution
您可以使用以下解决方案
HTML Markup
HTML 标记
<div class="row">
<div class="col-md-9 is-centered">
<div class="well well-form">
<!-- Two inline input fields per row -->
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control input-sm" type="text" name="input1" placeholder="Input 1">
</div>
<div class="col-sm-6 form-group">
<input class="form-control input-sm" type="text" name="input2" placeholder="Input 2">
</div>
</div>
<div class="row has-border">
<div class="col-sm-12">
<!-- Single input fields per row (pushed to the right) -->
<div class="row">
<div class="col-sm-6 pull-right">
<input class="form-control input-sm" type="text" name="input3" placeholder="align to right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Helpers (optional)
助手（可选）
SCSS
社会保障局
[class*="col-"] {
&.is-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
}
.well-form {
> .row {
padding-top: 8px;
border-top: 1px solid #ddd;
}
.form-group {
margin-bottom: 8px;
}
}
CSS
CSS
[class*="col-"].is-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.well-form > .row {
padding-top: 8px;
border-top: 1px solid #ddd;
}
.well-form .form-group {
margin-bottom: 8px;
}
Couple of things to notice:
需要注意的几点：
<table>is not a good approach in this case- inline
style="to HTML tags is not good at all (even if its a demo)
<table>在这种情况下不是一个好方法- 内联
style="到 HTML 标签一点也不好（即使它是一个演示）
Hope this helps
希望这可以帮助
