窗体组边缘底部被移除

Question

我在引导选项卡面板中创建了一个嵌套的form-group元素行。不幸的是，尽管form-group在bootstrap.css中具有15px的margin-bottom，但这些形式组的垂直间距并不正确。有人能提出原因和解决方案吗?

请看看下面的小提琴来理解。

谢谢

Answer 1

我建议您使用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>

Answer 2

说明。所有的col-*类都有浮动属性。所有的float元素在css中都没有高度，所以它们的父元素不能获取height值，height: 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>

Answer 3

只需使用类mb-您想要的值，请参阅文档中的间距，它解决了这个问题。https://getbootstrap.com/docs/4.3/utilities/spacing/