twitter-bootstrap Bootstrap 3 表单和表单最后一行背景色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21206335/
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
Bootstrap 3 form and form last row background color
提问by Alireza Fattahi
In our forms, we try to:
在我们的表格中，我们尝试：
- Add a background color to the form and
- background color to the the last row of the form, which usually contains our buttons.
- 为表单添加背景颜色并
- 表单最后一行的背景颜色，通常包含我们的按钮。
The problem is that the background color of the last row, is not aligned correctly. You will see that the last row size is exceeded the form width.
问题是最后一行的背景颜色没有正确对齐。您将看到最后一行的大小超出了表单宽度。
Please see:
请参见：
As you noted the black background color is not aligned correctly with the form pink color.
正如您所指出的，黑色背景颜色与表单粉红色不正确对齐。
Here is the code, which is same as sample in bootstrap site:
这是代码，与引导站点中的示例相同：
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" role="form" style="background-color:pink">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="form-group" style="background-color: black">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
<button type="submit" class="btn btn-default">Ignore!</button>
</div>
</div>
</form>
</div>
<div class="col-md-6">
I am just a sample
</div>
</div>
</div>
采纳答案by Alireza Fattahi
The problem was each form-group has a left and right margin of -15px, so it's expected that the black part to be 30px wider than the pink part.
问题是每个表单组的左右边距为 -15px，因此预计黑色部分比粉红色部分宽 30px。
To fix it I did as below:
为了解决它，我做了如下：
<div style="background-color: black; margin-left: 0px; margin-right: 0px;" class="form-group">
Reference : https://github.com/morteza/bootstrap-rtl/issues/20
回答by bto.rdz
Invert your divs try this:
反转你的 div 试试这个：
<div class="col-sm-offset-2 col-sm-10" style="background: black">
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
<button type="submit" class="btn btn-default">Ignore!</button>
</div>
</div>
