html – Twitter Bootrap 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>

使用纯粹的引导,您可以制作两个菜单：一个水平和一个垂直的菜单：

<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中的媒体查询即可,但是将自定义媒体查询添加到引导可能会更复杂一些.

原文地址：https://www.jb51.cc/html/230606.html