Twitter bootstrap 引导选项卡内容显示在选项卡外部

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

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

气泡含量

无聊的内容

碰巧我的导航选项卡不在新行，并且与前一行的元素对齐。修好后，一切都恢复了正常状态。

我也遇到了同样的问题

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

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

我有一个数据输入页面，在另一行的底部有选项卡式内容

...
...