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

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>

使用纯 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 可能会稍微复杂一些。