twitter-bootstrap bootstrap 减少行间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31124326/
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 reduce spacing between rows
提问by adviner
Bootstrap 3.3.5
引导程序 3.3.5
I'm trying to reduce the amount of spacing between rows:
我正在尝试减少行之间的间距：
Ive tried adding removing margins & padding on the row but doesnt seem to change anything:
我试过在行上添加删除边距和填充，但似乎没有改变任何东西：
<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; border: solid 1px red; padding-top: 0px !important; padding-bottom: 0px !important;">
These are the possible solutions to remove the spacing but doesnt seem to work for me.
这些是消除间距的可能解决方案，但似乎对我不起作用。
Here is the code:
这是代码：
<div class="container-fluid">
<div class="row" style=" border: solid 1px red; overflow: hidden; ">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Start Total: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="startCount" readonly="readonly" style="">
</div>
</div>
</form>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left ">
<form class="form-horizontal">
<div class="form-group">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Inmate Total: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="total" readonly="readonly" style="">
</div>
</div>
</form>
</div>
<div class="clearfix"></div>
</div>
<div class="row" style="">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Booked: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="book" readonly="readonly">
</div>
</div>
</form>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-left">
<form class="form-horizontal">
<div class="form-group" style="">
<label
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 control-label"
style="font-size: .8em;">Out House: </label>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left" style="margin: 0; padding: 0;">
<input type="text" class="form-control input-sm text-left" id="house" readonly="readonly">
</div>
</div>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
Update: 1
更新：1
If I modify the row style to have the following:
如果我修改行样式以具有以下内容：
style="margin-bottom: -10px !important; padding-bottom: -10px !important; margin-top: -10px !important; padding-top: -10px !important; outline: solid 1px green;"
The row is outline does move up but the space is still there
行是轮廓确实向上移动但空间仍然存在
回答by Joseph Marikle
The issue is that there is a margin applied to .form-group. To override, add this to your CSS or change it in the CSS code for bootstrap.
问题是有一个保证金适用于.form-group. 要覆盖，请将其添加到您的 CSS 或在引导程序的 CSS 代码中更改它。
.form-group {
margin-bottom: 0;
}
回答by MCBama
Well, most likely when you're setting it to 0px, it's already at 0px. If you want to FORCE it to be smaller, supply negative values.
好吧，很可能当您将其设置为 0px 时，它已经是 0px。如果您想强制它更小，请提供负值。
