1. 首頁
  2. 問答
  3. 如何在列布局和標籤佈局之間移動？

如何在列布局和標籤佈局之間移動？

2017-01-06 71 views
0

我正嘗試創建一個使用較大尺寸的列和更小尺寸的選項卡的佈局。但是，我將這些列拆分爲多個選項卡。如何在列布局和標籤佈局之間移動？

我很接近，但我的問題是，tab-pane s分成兩個tab-content div，因此當您單擊第二個tab-content 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>

來源

2017-01-06 Eric G

回答

0

我最終寫了一些javascript作爲tab event，手動從.tab-pane divs中刪除.active類。這也意味着我需要表示我的.tab-content divs在哪裏。我添加了一個額外的類.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>

來源

2017-01-06 23:44:45

0

所有面板都必須在同一個父DIV。這就是爲什麼你有這個問題。這應該可以解決它;）

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

來源

2017-01-06 09:09:18

+0

不幸的是，當你開始增加這打破了列布局內容：http://www.bootply.com/Nb8qCoQ4eV –

相關問題

 相關問題