Question

我想让侧边栏在电脑上显示所有内容（=＆gt; 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文件，如果用户动态更改了任何内容，则需要手动同步内部内容。

谢谢！

Answer 1

我知道这是一个老问题，但需要很多，需要一个简单的解决方案。如果您只想将所有选项卡显示为已打开，则可以覆盖在媒体查询中隐藏它的CSS，以获取要从选项卡切换以显示所有内容的大小：

 .tab-content > .tab-pane {
    display:block;
 }

然后你可以隐藏标签控件

 ul.nav-tabs {
    display:none;
 }

所有标签都会显示为展开。

如果要将它们转换为手风琴（这似乎是常见请求），您可以覆盖tabset的模板以包含选项卡标题，然后根据各种屏幕尺寸的媒体查询显示隐藏它。这是一个小提示，显示你将如何做http://jsfiddle.net/mcgraphix/bamtaap1/

Answer 2

您可能对 bootstrap-tabcollapse 或 bootstrap-responsive-tabs 感兴趣。他们的行为与您的目的略有不同，但总而言之，他们在小屏幕和大屏幕上处理标签。

他们做了类似的事情：

在大屏幕中，您会看到标签内容（横向组织）。
在小屏幕上，你会得到一个手风琴（垂直组织）。

你可能想给他们看一下和/或尝试一下。我知道他们没有Angular指令或类似指令，但它们的实现似乎很容易，不会威胁到Angular控制器的完整性。

Angular UI Bootstrap响应选项卡崩溃

2 个答案: