Twitter bootstrap 角度UI引导响应选项卡折叠

我想制作一个侧边栏，在pc（=>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>

表1内容
表2内容

在大屏幕上显示时，应如下所示

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

表1内容
表2内容

如果有一个更好的选择除了标签，我会开放的，虽然视觉控制需要看起来像在最后对齐的标签。 我愿意接受其他建议，我可以这样做

<div class="visible-xs">
  tabbed code
</div>
<div class="hidden-xs">
  Plain code
</div>

选项卡式代码
明码

但是，这会产生一个需要加载的更大的html文件，如果用户动态更改了任何内容，则需要手动同步内部内容

---

谢谢！

您可能对或感兴趣。他们的行为与您的目的略有不同，但总而言之，他们在小屏幕和大屏幕上处理选项卡

他们做类似的事情：

• 在大屏幕中，您会看到一个选项卡式内容（水平组织）
• 在小屏幕上，你会看到一个手风琴（垂直组织）

---

您可能想看看和/或尝试一下。我知道它们没有Angular指令或类似指令，但它们的实现似乎足够简单，不会威胁Angular controller的完整性。

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

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

然后可以隐藏选项卡控件

 ul.nav-tabs {
    display:none;
 }

所有选项卡将显示为展开状态

---

如果你想把它们转换成手风琴（这似乎是常见的要求），您可以覆盖选项卡集的模板，使其包含选项卡标题，然后根据不同屏幕大小的媒体查询显示隐藏它。这里有一个小提琴，显示了如何执行此操作

当这是您正在寻找的效果时，它们非常有用，可以很容易地在angular中使用，但这不是我想要的。我最终只需编写两段独立的代码。一段用于xs，另一段！xs。您能否在某个插件中共享此修复程序的代码，或添加为答案？不是修复程序，只是两个版本的代码。一个隐藏的xs，另一个可见的xsI在ui引导tpls中遇到问题，即它不会在一致模式下触发ng click事件。请查找相同的JSFIDLE链接。。你能检查并回答这个问题吗