我在引导选项卡面板中创建了一个带有form-group
元素的嵌套行。
不幸的是,尽管form-group
在margin-bottom
中15px
bootstrap.css
package com.khackett.runmate;
,但这些表格组并没有垂直间隔。
任何人都可以提出原因和解决方案吗?
请查看以下fiddle以了解。
由于
答案 0 :(得分:6)
我建议您使用http://getbootstrap.com/css/#forms-horizontal
查看DEMO
标记
<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>
答案 1 :(得分:2)
解释。所有col- *类都有float属性。所有浮动元素在css中都没有高度,因此他们的父母无法获得高度值,高度:auto不起作用。
您只需要正确包装表单即可。请记住,你总是应该将.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>
答案 2 :(得分:1)
只需使用类mb - 您想要的值,请参阅文档了解间距,它解决了问题。