Question

我有一个带有6个按钮的合理按钮组。

http://getbootstrap.com/components/#btn-groups-justified

它看起来很棒，但在移动设备上，我想让它堆叠成基本上成为btn-block的垂直按钮组！

有没有很好的方法来实现这一目标？我必须创建两个，并隐藏/显示不同的大小？

Answer 1

You need to add your own responsive CSS, which overwrites Bootstrap's style for mobile view.

@media (max-width: 768px) {
  .btn-group-justified-responsive > .btn,
  .btn-group-justified-responsive > .btn-group {
    display: block;
    width: auto;
    margin: 0 !important;
  }

  .btn-group-justified-responsive > .btn-group > .btn {
    border-radius: 0;
  }

  .btn-group-justified-responsive > .btn-group:not(:last-child) > .btn {
    border-bottom: none;
  }

  .btn-group-justified-responsive > .btn-group:first-child > .btn:first-child {
    border-top-left-radius: 5px !important;
  }
  .btn-group-justified-responsive > .btn-group:first-child > .btn:last-child {
    border-top-right-radius: 5px !important;
  }
  .btn-group-justified-responsive > .btn-group:last-child > .btn:first-child {
    border-bottom-left-radius: 5px !important;
  }
  .btn-group-justified-responsive > .btn-group:last-child > .btn:last-child {
    border-bottom-right-radius: 5px !important;
  }
}

如何创建一个合理的菜单，使用Bootstrap在移动设备上堆叠？

1 个答案: