Javascript 引导选项卡以Secondtab中的大空白开始

我有一个表单，它在许多选项卡中，比如tab1、tab2、tab3。它只是一堆输入的形式。我想将所有表格内容作为一个整体提交。但问题是，我的第二个选项卡是从第一个表单停止的位置开始的。所以我在第二个标签的顶部有巨大的黑色空间。我已经在下面附加了JSFIDLE链接。如果你有任何问题，请告诉我

 <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>

我的标题




名称
年龄
性
位置
城市
陈述
输入1选项卡2
输入2选项卡2
输入3选项卡2
输入3选项卡2
输入4选项卡2
最后输入
提交

---

该问题是由于您在

选项卡窗格中使用
淡入
和
而引起的

如果您删除这些内容，并重新定位您的
表单
标记，使其不是
选项卡内容
中的元素，那么我认为这就是您要寻找的结果

  <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>






名称
年龄
性
位置
城市
陈述
输入1选项卡2
输入2选项卡2
输入3选项卡2
输入3选项卡2
输入4选项卡2
最后输入
提交

该问题是由于您在
选项卡窗格中使用
淡入
和
而引起的

如果您删除这些内容，并重新定位您的
表单
标记，使其不是
选项卡内容
中的元素，那么我认为这就是您要寻找的结果

  <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>






名称
年龄
性
位置
城市
陈述
输入1选项卡2
输入2选项卡2
输入3选项卡2
输入3选项卡2
输入4选项卡2
最后输入
提交

这里的问题是css。在bootstrap中，css for选项卡写为

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

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

这里的
.tab窗格
应该是
直接子项
（在您的情况下是
表单
）
为了解决您的问题，您应该在bootstrap中更改css，或者您必须在custom.css中编写，如下所示：

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

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

这里的问题是css。在bootstrap中，css for选项卡写为

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

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

这里的
.tab窗格
应该是
直接子项
（在您的情况下是
表单
）
为了解决您的问题，您应该在bootstrap中更改css，或者您必须在custom.css中编写，如下所示：

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

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

tab1的内容实际上在tab2中，它是不可见的——正如您可能从问题中了解到的。在tab1上，tab2的内容也在那里——也就是说，您可以在底部看到它的空间

您是否正在使用实现此功能所需的Javascript库


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

并链接到：

您是否自定义了CSS或引导到T以测试这一点？
tab1的内容实际上在tab2中，它是不可见的-您可能从您的问题中知道这一点。在tab1上，tab2的内容也在那里——这意味着，您可以