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选项卡内容出现在选项卡外部

2 个答案: