Twitter bootstrap 3 两个控件如何在列布局和选项卡布局之间移动？

我正在尝试创建一个布局，使用较大尺寸的列和较小尺寸的选项卡。但是，我将这些列拆分为多个选项卡

我很接近，但我的问题是

选项卡窗格

s被分为两个

选项卡内容

div，因此当您单击第二个选项卡内容div中的选项卡时，它不会从第一个选项卡内容div隐藏窗格。单击联系人或选项以了解我的意思

怎么解决这个问题

或者，如果有另一种已知的方法来实现这一点，那也很好

.选项卡内容.面板标题{
显示：无；
}
@仅介质屏幕和（最小宽度：992px）{
.tab内容>.tab窗格{
显示：块；
}
.选项卡内容.面板标题{
显示：块；
}
}







信息
信息内容
文件
文件材料
更新
一堆更新
联络
联系方式
选择权
选择

所有面板必须位于同一父分区中。这就是为什么会出现此问题。这应该可以解决它；）

---

HTML:

<div class="container">
    <ul class="nav nav-tabs visible-xs visible-sm">
      <li class="active"><a data-toggle="tab" href="#info">Info</a></li>
      <li><a data-toggle="tab" href="#docs">Docs</a></li>
      <li><a data-toggle="tab" href="#updates">Updates</a></li>
      <li><a data-toggle="tab" href="#contacts">Contacts</a></li>
      <li><a data-toggle="tab" href="#options">Options</a></li>
    </ul>

    <div class="row">
      <div class="tab-content">
        <div id="info" role="tabpanel" class="panel panel-default tab-pane active colOverrides col-md-8">
          <div class="panel-heading">
            <h3 class="panel-title">Info</h3>
          </div>
          <div class="panel-body">
            Info content
          </div>
        </div>

        <div id="contacts" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-4 ">
          <div class="panel-heading">
            <h3 class="panel-title">Contacts</h3>
          </div>
          <div class="panel-body">
            Contacts Stuff
          </div>
        </div>

        <div id="docs" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-8">
          <div class="panel-heading">
            <h3 class="panel-title">Docs</h3>
          </div>
          <div class="panel-body">
            Document Stuff
          </div>
        </div>

        <div id="options" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-4">
          <div class="panel-heading">
            <h3 class="panel-title">Options</h3>
          </div>
          <div class="panel-body">
            The options
          </div>
        </div>

        <div id="updates" role="tabpanel" class="panel panel-default tab-pane colOverrides col-md-8">
          <div class="panel-heading">
            <h3 class="panel-title">Updates</h3>
          </div>
          <div class="panel-body">
            Bunch of updates
          </div>
        </div>
      </div>
    </div>
  </div>

.tab-content .panel-heading {
    display: none;
}
@media only screen and (min-width: 992px) {
    .tab-content > .tab-pane {
        display: block;
    }
    .tab-content .panel-heading {
        display: block;
    }
}
@media (max-width: 991px) {
    .colOverrides.col-md-8 {
        width: 100% !important;
    }
    .colOverrides.col-md-4 {
        width: 100% !important;
    }
}
.colOverrides {
    padding: 0px !important;
    margin: 15px;
}
.colOverrides.col-md-8 {
    width: calc(66.66666667% - 30px);
}
.colOverrides.col-md-4 {
    width: calc(33.33333333% - 30px);
}

---

---

工作解决方案：

我最后编写了一些javascript作为一个脚本，手动从

.tab pane

divs中删除

.active

类。这也意味着我需要指出我的

.tab content

div在哪里。我在tabs中添加了一个额外的类

.tn cols来识别它们。如果确定页面上没有其他选项卡集，则可以指定
.tab content

这并不意味着淡入淡出功能无法正常工作，因为选项卡模块支持淡入淡出功能



.选项卡内容.面板标题{
显示：无；
}
@仅介质屏幕和（最小宽度：992px）{
.tab内容>.tab窗格{
显示：块；
}
.选项卡内容.面板标题{
显示：块；
}
}
$（函数（）{
$（'a[data toggle=“tab”]”）on（'show.bs.tab'，函数（e）{
$（'.tn cols to tabs.tab pane.active'）.removeClass（'active'）；
})
});







信息
信息内容

adsf

adsf

adsf

adsf

adsf

adsf

adsf

adsf

adsf
文件
文件材料
更新
一堆更新
联络
联系人信息

adsf

adsf

adsf

adsf

adsf

adsf

adsf

adsf
选择权
选择
不幸的是，当您开始添加内容时，这会破坏列布局：