Html Twitter引导3-如何根据屏幕大小从水平按钮组切换到垂直按钮组？

我有一个水平按钮组，我想让它切换到垂直按钮组，屏幕大小是额外的小（-xs）。使用Bootstrap 3类是否有办法做到这一点？

使用jquery检测窗口大小并相应调整菜单的类：

<div class="btn-group" id="responsive">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

<script>
$(window).resize(function() {
  if ($(window).width() < 408) {
    $('#responsive').removeClass('btn-group');
    $('#responsive').addClass('btn-group-vertical');
  } else {
    $('#responsive').addClass('btn-group');
    $('#responsive').removeClass('btn-group-vertical');
  }
});
</script>

你好
世界
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<408）{
$（“#响应”）.removeClass（'btn-group'）；
$（“#响应”）.addClass（'btn-group-vertical'）；
}否则{
$（“#响应”）.addClass（'btn-group'）；
$（“#响应”）.removeClass（'btn-group-vertical'）；
}
});

使用纯引导，您可以创建两个菜单：水平菜单和垂直菜单：

<div class="btn-group hidden-xs">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

<div class="btn-group-vertical visible-xs">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

你好
世界
你好
世界

---

在理想的情况下，您可以只使用css中的媒体查询来实现这一点，但向引导添加自定义媒体查询可能会有点复杂。

如果您使用Duvrai建议的纯引导方法，并在ASP.NET中使用Razor，您可以通过创建可重用的@helper来避免代码的字面重复。 因此，所提供的示例将成为

@helper ReusedBlock(string clazz){
<div class="@clazz">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>
}

如果重用的块很复杂，并且使代码更干净、更易于理解和维护，那么这一点尤其有用

---

注意：您可以将任意数量的参数传递给已定义的帮助器，只需将它们包含在其定义中。

这正是我所需要的。谢谢

@ReusedBlock("btn-group hidden-xs")
@ReusedBlock("btn-group-vertical visible-xs")