引导选项卡以 Secondtab 中的大空格开头

Question

我有一个表单，它在许多选项卡中，例如tab1，tab2，tab3。它只是一堆输入形式。我想将所有表单内容作为一个整体提交。但问题是我的第二个选项卡是从第一个表单停止的地方开始的。所以我在第二个选项卡的顶部有巨大的黑色空间。我在下面附上了JSfiddle链接。如果您有任何问题，请告诉我。

<div class="col-sm-12">
<h1>
My Heading
</h1>
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active"><a href="#info1" data-toggle="tab">Info 1</a></li>
<li class=""><a href="#info2" data-toggle="tab">Info 2</a></li>
</ul>
<div class="panel-body no-padding">
<div class="tab-content">
<form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
<div id="info1" class="tab-pane fade active in">  
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Name
<input type="text" name="name" value="">
</label>
</section>
<section>
<label class="input">Age
<input type="text" name="" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Sex
<input type="text" name="address1" value="">
</label>
</section>
<section>
<label class="input">Location
<input type="text" name="address2" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">City
<input type="text" name="city" value="">
</label>
</section>
<section>
<label class="input">State
<input type="text" name="state" value="">
</label>
</section>
</div>
</fieldset>
</div>
<div id="info2" class="tab-pane fade">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Input 1 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 2 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 4 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Last Input
<input type="text"/>
</label>
</section>
</div>
</fieldset>
</div>
<footer>
<button type="submit" class="btn btn-primary">Submit</button>
</footer>
</form>
</div>
</div>
</div>

JSFiddle for Bootstrap 选项卡窗体

Answer 1

这里的问题出在 css 上。在引导程序中，选项卡的 css 写为

.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}

这里.tab-pane应该direct child(在您的情况下是form) 为了解决您的问题，您应该在引导程序中更改您的 css，或者您必须编写自定义.css如下所示：

.tab-content .tab-pane {
display: none;
}
.tab-content  .active {
display: block;
}

Answer 2

该问题是由您在tab-panes 上使用fade和in引起的。

如果您删除这些并重新定位您的form标签，使其不是tab-content内的元素，那么我认为这就是您正在寻找的结果。

<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active"><a href="#info1" data-toggle="tab">Info 1</a></li>
<li class=""><a href="#info2" data-toggle="tab">Info 2</a></li>
</ul>
<div class="panel-body no-padding">
<form action="ACTION URL" method="PUT" id="idforthis" class="smart-form" novalidate="novalidate">
<div class="tab-content">
<div id="info1" class="tab-pane active">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Name
<input type="text" name="name" value="">
</label>
</section>
<section>
<label class="input">Age
<input type="text" name="" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Sex
<input type="text" name="address1" value="">
</label>
</section>
<section>
<label class="input">Location
<input type="text" name="address2" value="">
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">City
<input type="text" name="city" value="">
</label>
</section>
<section>
<label class="input">State
<input type="text" name="state" value="">
</label>
</section>
</div>
</fieldset>
</div>
<div id="info2" class="tab-pane">
<fieldset>
<div class="col col-sm-4">
<section>
<label class="input">Input 1 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 2 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Input 3 tab 2
<input type="text"/>
</label>
</section>
</div>
<div class="col col-sm-4">
<section>
<label class="input">Input 4 tab 2
<input type="text"/>
</label>
</section>
<section>
<label class="input">Last Input
<input type="text"/>
</label>
</section>
</div>
</fieldset>
</div>
<footer>
<button type="submit" class="btn btn-primary">Submit</button>
</footer>
</div>
</form>
</div>
</div>

更新的 JSFiddle

Answer 3

tab1 的内容实际上在 tab2 中，它只是不可见的 - 正如您可能从您的问题中知道的那样。在tab1上，tab2的内容也在那里 - 这意味着，你可以在底部看到它的空间。

您是否正在使用所需的Javascript库？

https://getbootstrap.com/docs/3.3/components/

对选项卡面板使用导航需要 JavaScript 选项卡插件 对于选项卡 对于可选项卡的区域，您必须使用选项卡 JavaScript 插件。这 标记还需要额外的角色和 ARIA 属性 - 请参阅 插件的示例标记以获取更多详细信息。

链接到：https://getbootstrap.com/docs/3.3/javascript/#tabs

您是否正在自定义任何 CSS 或遵循 Bootstrap 到 T 来测试这一点？