twitter-bootstrap 表单组边距底部已删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32668411/
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
Form group margin bottom removed
提问by Lorenzo
I am creating a nested row with some form-groupelement in a bootstrap tab panel.
Unfortunately those form-groups are not vertically spaced correctly despite to the fact that form-grouphas a margin-bottomof 15pxin bootstrap.css.
Can anybody suggest why and a solution?
我正在form-group引导程序选项卡面板中创建一个包含一些元素的嵌套行。不幸的是这些形式的基团没有垂直正确，尽管到这一事实间隔form-group具有margin-bottom的15px在bootstrap.css。任何人都可以建议原因和解决方案吗？
Please have a look at the following fiddleto understand.
请看下面的小提琴来理解。
Thanks
谢谢
采纳答案by Manwal
I suggest you to use http://getbootstrap.com/css/#forms-horizontal
我建议你使用http://getbootstrap.com/css/#forms-horizontal
Take a look at DEMO
看看DEMO
Markup
标记
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox-content">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tab1</a></li>
<li role="presentation"><a href="#properties" aria-controls="properties" role="tab" data-toggle="tab">Tab2</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Value">
</div>
</div>
</form>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="properties">
<div class="row">
<div class="col-md-12">
<input type="hidden" id="hiddenJson" value="@ViewBag.Json">
<div class="well" style="min-height: 190px;">some data</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
回答by 0x860111
Explanation. All col-* classes have float property. All float elements have no height in css, so their parents can't get height value, height: auto doesn't work.
解释。所有 col-* 类都具有 float 属性。所有浮动元素在css中都没有高度，所以它们的父元素无法获得高度值，height: auto 不起作用。
All you need is to wrap forms correctly. Remember, you always should use .row to parent and .col-* to child.
您所需要的只是正确包装表单。请记住，您始终应该使用 .row 来表示父项，使用 .col-* 来表示子项。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox-content">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Tab1</a></li>
<li role="presentation"><a href="#properties" aria-controls="properties" role="tab" data-toggle="tab">Tab2</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 1</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 1" disabled="">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 2</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 2" disabled="">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 3</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 3" disabled="">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label">field 4</label>
<div class="col-md-9">
<input class="form-control" type="text" value="value field 4" disabled="">
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="properties">
<div class="row">
<div class="col-md-12">
<input type="hidden" id="hiddenJson" value="@ViewBag.Json">
<div class="well" style="min-height: 190px;">some data</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>回答by Daniel Santos
Just use the class mb-the value you want, see the Documentation for spacing, it fixes the issue. https://getbootstrap.com/docs/4.3/utilities/spacing/
只需使用类 mb-您想要的值，请参阅间距的文档，它解决了问题。 https://getbootstrap.com/docs/4.3/utilities/spacing/
