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

Question

我有一个水平按钮组，希望在屏幕尺寸为extra small (-xs)时切换为垂直按钮组。在Bootstrap 3类中有没有实现这个功能的方法？

- PHenderson

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>

使用纯bootstrap，您可以创建两个菜单：一个水平的和一个垂直的：

<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中的媒体查询即可完成此操作，但是将自定义媒体查询添加到bootstrap可能会更加复杂。

- Duvrai

---

这正是我所需要的。谢谢！ - PHenderson

Answer 2

如果您使用Duvrai建议的纯Bootstrap方法并在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")

如果被重用的代码块很复杂，使用这个方法特别有用，可以让代码更加清晰易懂，维护起来也更方便。

注意：你可以向定义的辅助函数传递任意数量的参数，只需在其定义中包含它们即可。

- Marco