我想做一个侧边栏有它的所有内容显示，而在电脑上（=〉sm），并有它的标签，而在手机上（
有效地隐藏所有选项卡控件，并显示所有选项卡，就像它们是展开的可折叠面板一样。
示例边栏在电话中应如下所示
<div class="col-xs-12 col-sm-4">
<tabset>
<tab heading="Tab 1">
<div class="col-xs-12">
Tab 1 Content
</div>
</tab>
<tab heading="Tab 2">
<div class="col-xs-12">
Tab 2 Content
</div>
</tab>
</tabset>
</div>在大屏幕上显示时，它应如下所示
<div class="col-xs-12 col-sm-4">
<div class="col-xs-12">
Tab 1 Content
</div>
<div class="col-xs-12">
Tab 2 Content
</div>
</div>如果有一个更好的选择，除了标签，我会开放，虽然视觉控件需要看起来像调整标签在最后。我开放的其他建议，我可以做
<div class="visible-xs">
tabbed code
</div>
<div class="hidden-xs">
Plain code
</div>然而，这确实产生了需要加载的较大HTML文件，并且如果用户动态地改变了任何内容，则需要手动地同步内部内容。
谢谢你，谢谢你
2条答案
按热度按时间k97glaaz1#
我知道这是一个老问题，但是这个需求出现了很多，需要一个简单的解决方案。如果你只想显示所有的标签页，就像它们是打开的一样，你可以覆盖CSS，它隐藏在一个媒体查询中，你想从标签页切换到显示所有内容的大小：
然后可以隐藏选项卡控件
所有选项卡都将显示为展开状态。
如果你想把它们转换成一个可折叠的（这似乎是常见的要求），你可以覆盖标签集的模板，包括一个标签标题，然后根据不同屏幕大小的媒体查询来显示隐藏它。
cfh9epnr2#
您可能会对**bootstrap-tabcollapse或bootstrap-responsive-tabs**感兴趣。它们的行为与您的目的略有不同，但总而言之，它们处理小屏幕和大屏幕中的选项卡。
他们做着类似的事情：
你可能想给予他们一个外观和/或尝试。我知道他们没有一个Angular 指令或类似的，但他们的实现似乎很容易，不威胁Angular 控制器的完整性。