Question

我有一个水平按钮组，我想让它切换到一个垂直按钮组，屏幕尺寸特别小（-xs）。有没有办法用Bootstrap 3类做到这一点？

Answer 1

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

使用纯引导程序，您可以制作两个菜单：水平菜单和垂直菜单：

<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中的媒体查询来执行此操作，但在引导程序中添加自定义媒体查询可能会稍微复杂一些。

Answer 2

如果您使用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")

如果重用的块很复杂并且使代码更清晰，更易于理解和维护，这将非常有用。

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

Twitter Bootstrap 3 - 如何根据屏幕尺寸从水平按钮组切换到垂直按钮组？

2 个答案: