Bootstrap 框架列在选项卡内容中不起作用

Question

我想在内容选项卡中包含 col-md-4，但如果我单击下一个选项卡，则不工作的图像或文本不会隐藏。 我的目标是 3 列中的 Ihover 插件，但如果我单击下一个选项卡上一个不隐藏

<ul class="nav nav-pils nav-justified">
    <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
    <li><a data-toggle="tab" href="#loga">test2</a></li>
    <li><a data-toggle="tab" href="#dtp">test3</a></li>
    <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>

<div class="tab-content">
    <div id="webdesign" class="section">
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
        </div>
        <div id="loga" class="tab-pane fade">
            <div id="dtp" class="tab-pane fade">
                <h1>TEST</h1>
            </div>
            <div id="android" class="tab-pane fade">
                <h1>TEST</h1>
        </div>
    </div>
</div>

Answer 1

它不起作用，因为 Bootstrap 列必须是具有 row 类的元素的子元素。 尝试这个：

<ul class="nav nav-pills nav-justified">
    <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
    <li><a data-toggle="tab" href="#loga">test2</a></li>
    <li><a data-toggle="tab" href="#dtp">test3</a></li>
    <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>

<div class="tab-content">
    <div id="webdesign" class="section">
        <div class="row">
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
        </div>
        <div id="loga" class="tab-pane fade">
            <div id="dtp" class="tab-pane fade">
                <h1>TEST</h1>
            </div>
            <div id="android" class="tab-pane fade">
                <h1>TEST</h1>
            </div>
        </div>
    </div>
</div>

Answer 2

它不起作用，因为 loga、dtp 和 android 选项卡是网页设计选项卡的子项。 因此，网页设计选项卡将默认显示。

尝试这个：

<ul class="nav nav-pils nav-justified">
    <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
    <li><a data-toggle="tab" href="#loga">test2</a></li>
    <li><a data-toggle="tab" href="#dtp">test3</a></li>
    <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>

<div class="tab-content">
    <div id="webdesign" class="section">
        <div class="">
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
            <div class="col-md-4">
                <h1>fbbvasvba</h1>
            </div>
        </div>
    </div>
    <div id="loga" class="tab-pane fade">
        <div id="dtp" class="tab-pane fade">
            <h1>TEST</h1>
        </div>
        <div id="android" class="tab-pane fade">
            <h1>TEST</h1>
        </div>
    </div>

</div>

Answer 3

此标记需要大量清理，当您遇到问题时，参考 Bootstrap 文档中的选项卡和导航药丸总是一个好主意。 这是您需要的代码：

<ul class="nav nav-pills nav-justified">
  <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li>
  <li><a data-toggle="tab" href="#loga">test2</a></li>
  <li><a data-toggle="tab" href="#dtp">test3</a></li>
  <li><a data-toggle="tab" href="#android">test4</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="webdesign">
    <div class="row">
      <div class="col-md-4">
        <h1>col1</h1>
      </div>
      <div class="col-md-4">
        <h1>col2</h1>
      </div>
      <div class="col-md-4">
        <h1>col3</h1>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane" id="loga">
    tab loga
  </div>
  <div role="tabpanel" class="tab-pane" id="dtp">
    tab dtp
  </div>
  <div role="tabpanel" class="tab-pane" id="android">
    tab android
  </div>
</div>

不确定我会在nav-pills和nav-tabs之间混合搭配，但这是您的特权。

Answer 4

TL&DR ：使用 col-* 时，您需要确保它的父级为 div class="row"。 合理的是一行建立了一个完整的边界（端到端），一个 col-* 将该边界分解为“列”/“部分”。

解决方案：由接受的答案提供； 这提供了额外的理由。

<div role="tabpanel" class="tab-pane active" id="webdesign">
<div class="row">
  <div class="col-md-4">
    <h1>col1</h1>
  </div>
  <div class="col-md-4">
    <h1>col2</h1>
  </div>
  <div class="col-md-4">
    <h1>col3</h1>
  </div>
</div>