Bootstrap 选项卡内容出现在选项卡外

Question

我的选项卡内容显示在选项卡之外，但单击选项卡会更改正确显示的内容。

        <div id = "expTabs">
            <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                <li class="active"><a data-toggle="tab" href="#tab1">Bleh</a></li>
                <li><a data-toggle="tab" href="#tab2">Blah</a></li>
            </ul>

            <div class="tab-content">
                <div id="tab1" class="tab-pane fade in active">
                    <p>Bleh Content</p>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <p>Blah Content</p>
                </div>
            </div>
        </div>

Answer 1

碰巧我的导航标签不在新行上，而是与前一行的元素对齐。修好后，一切如期而至。

Answer 2

我遇到了同样的问题

我不得不在选项卡和选项卡内容周围添加 div。下面是 ID 为“tabs”的 div。然后内容正确对齐。

我有一个数据输入页面，在另一行的底部有标签内容

<div class="row">
  <div id="tabs">
    <div class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
      <a class="nav-item nav-link ml-3 active" id="nav-one-tab" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="true">One</a>
      <a class="nav-item nav-link ml-3" id="nav-two-tab" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false">Two</a>
    </div>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane active" id="nav-one" role="tabpanel" aria-labelledby="nav-one-tab">...</div>
      <div class="tab-pane" id="nav-two" role="tabpanel" aria-labelledby="nav-two-tab">...</div>
    </div>
  </div>
</div>

Bootstrap 选项卡内容出现在选项卡外

Bootstrap Tab-content Appearing Outside Tabs

tabs

twitter-bootstrap