我想做一个侧边栏有它的所有内容显示,而在电脑上(=〉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 控制器的完整性。