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列必须是具有行类的元素的子元素。试试这个：

<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标签是webdesign标签的子项。因此，网页设计选项卡将默认显示。

试试这个：

<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文档for tabs和nav pills总是一个好主意。这是您需要的代码：

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

Bootstrap框架列在tab-content中不起作用

4 个答案: