两个如何在列布局和选项卡布局之间移动

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

我很接近，但我的问题是tab-pane被分成两个tab-contentdiv，因此当您单击第二个选项卡内容div中的选项卡时，它不会从第一个选项卡内容div中隐藏窗格。单击联系人或选项以了解我的意思。

无论如何要解决这个问题？

或者，如果有另一种已知的方法可以实现这一点，那也很棒。

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <style>
    .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;
      }
    }
  </style>
</head>
<body>
  <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="col-md-8 tab-content">
        <div id="info" role="tabpanel" class="panel panel-default tab-pane active">
          <div class="panel-heading">
            <h3 class="panel-title">Info</h3>
          </div>
          <div class="panel-body">
            Info content
          </div>
        </div>
        <div id="docs" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Docs</h3>
          </div>
          <div class="panel-body">
            Document Stuff
          </div>
        </div>
        <div id="updates" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Updates</h3>
          </div>
          <div class="panel-body">
            Bunch of updates
          </div>
        </div>
      </div>
      <div class="col-md-4 tab-content">
        <div id="contacts" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Contacts</h3>
          </div>
          <div class="panel-body">
            Contacts Stuff
          </div>
        </div>
        <div id="options" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Options</h3>
          </div>
          <div class="panel-body">
            The options
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

所有面板都必须位于同一个父级中。这就是您遇到此问题的原因。这应该可以解决;)

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

和 CSS：

.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);
}

工作解决方案：http://www.bootply.com/OzJJ2bX9ef

我最终编写了一些javascript作为选项卡事件，该事件手动从.tab-panediv中删除该.active类。这也意味着我需要表示我的.tab-contentdiv 的位置。我添加了一个额外的类.tn-cols-to-tabs来识别它们。如果您确定页面上没有其他选项卡集，则可以指定.tab-content。

这确实意味着淡入淡出无法正常工作，正如选项卡模块所支持的那样。

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
      .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;
        }
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
           $('.tn-cols-to-tabs .tab-pane.active').removeClass('active');
        })
      });
    </script>
  </head>
  <body>
  <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="col-md-8 tab-content tn-cols-to-tabs">
        <div id="info" role="tabpanel" class="panel panel-default tab-pane active">
          <div class="panel-heading">
            <h3 class="panel-title">Info</h3>
          </div>
          <div class="panel-body">
            Info content<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf
          </div>
        </div>
        <div id="docs" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Docs</h3>
          </div>
          <div class="panel-body">
            Document Stuff
          </div>
        </div>
        <div id="updates" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Updates</h3>
          </div>
          <div class="panel-body">
            Bunch of updates
          </div>
        </div>
      </div>
      <div class="col-md-4 tab-content tn-cols-to-tabs">
        <div id="contacts" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Contacts</h3>
          </div>
          <div class="panel-body">
            Contacts Stuff<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf<br/>
            adsf
          </div>
        </div>
        <div id="options" role="tabpanel" class="panel panel-default tab-pane">
          <div class="panel-heading">
            <h3 class="panel-title">Options</h3>
          </div>
          <div class="panel-body">
            The options
          </div>
        </div>
      </div><!-- .col-md-4 -->
    </div><!-- .row -->
  </div><!-- .container -->
  </body>
</html>

相关内容

最新更新

热门标签：