Lor*_*nzo 6 css css3 twitter-bootstrap twitter-bootstrap-3
我form-group在引导选项卡面板中创建了一个带有一些元素的嵌套行.不幸的是这些形式的基团没有垂直正确,尽管到这一事实间隔form-group具有margin-bottom的15px在bootstrap.css.任何人都能建议为什么和解决方案?
请看下面的小提琴来理解.
谢谢
我建议你使用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>
Run Code Online (Sandbox Code Playgroud)