Bootstrap 选项卡以 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 tab form

Answer 1

问题是由于您在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>

Updated JSFiddle

Answer 2

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

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

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

这里.tab-pane 应该是direct child（在你的情况下是form） 为了解决您的问题，您应该在引导程序中更改您的 css，或者您必须在 custom.css 中编写如下：

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

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

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 来测试这个？