Javascript 引导框架列在选项卡内容中不起作用_Javascript_Html_Css_Twitter Bootstrap

Javascript 引导框架列在选项卡内容中不起作用

javascript html css twitter-bootstrap

Javascript 引导框架列在选项卡内容中不起作用,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我想在“内容”选项卡中包含col-md-4，但如果单击“下一个选项卡”，则不会隐藏不起作用的图像或文本。我的目标是Ihover插件在3列，但如果我点击下一个标签，上一个不会隐藏 <ul class="nav nav-pils nav-justified"> <li class="active"><a data-toggle="tab" href="#webdesign">test1</a></li> <li>

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

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







fbbvasvba
fbbvasvba
fbbvasvba
试验
试验

它不起作用，因为引导列必须是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>







fbbvasvba
fbbvasvba
fbbvasvba
试验
试验

它不起作用，因为loga、dtp和android选项卡是webdesign选项卡的子项。因此，默认情况下将显示webdesign选项卡

试试这个：

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

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







fbbvasvba
fbbvasvba
fbbvasvba
试验
试验

此标记需要大量清理，在遇到问题时参考引导文档总是一个好主意。以下是您需要的代码：

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







可乐
可乐
可乐
标签loga
选项卡dtp
选项卡android

我不确定我是否会在

导航药片和导航标签之间混合搭配，但这是你的特权。
TL&DR：使用col-*时，你需要确保它的父级是div class=“row”。rational is a行建立完整的边界（端到端），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>


可乐
可乐
可乐
我已经用正确的缩进更新了代码，但我认为结构现在可能不正确。如果是这种情况，你能发布正确的HTML吗？它也应该是nav pills
，但你不能进行1字符编辑；）这是关键；它必须是一行的直接子行；没有祖父母或年长者。