html - 如何使 Bootstrap 3 按钮组响应？

Question

当我通过手机浏览页面时，我试图让按钮堆叠在一起。我会让它们出现在一行中，但是它们里面的文本很长，当我缩小页面时看起来不太好。

这是我的代码。

<link rel="stylesheet" crossorigin="anonymous" integrity=
    "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="btn-group btn-group-justified btn-group-lg btn-group-vertical">
    <a href="#" class="btn btn-primary">
      <font size="6">الدروس و التجارب</font>
    </a>
    <a href="#" class="btn btn-primary">
      <font size="6">المنشورات و الكتب الشخصية</font>
    </a>
    <a href="#" class="btn btn-primary">
      <font size="6">المدونة</font>
    </a>
  </div>
</div>

Answer 1

据我所知，Bootstrap 中没有内置任何东西来执行此操作。但是，可以在 Bootstrap 之上使用一些自定义 CSS 来完成。我们可以在小屏幕上显式堆叠按钮。

为此，我使用了 Bootstrap 用于任何小于桌面的断点。如果你愿意，这可以很容易地修改。如果你想阅读更多关于媒体查询的内容，我可以推荐 this MDN article (链接转到关于宽度的部分，但整篇文章都很有趣)。

@media (max-width: 991px) {
  .btn-group.my-btn-group-responsive > .btn {
    display: block;
    width: 100%;
  }
  
  /* making the border-radius correct */
  .btn-group.my-btn-group-responsive > .btn:first-child {
    border-radius: 6px 6px 0 0;
  }
  .btn-group.my-btn-group-responsive > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 6px;
  }
  .btn-group.my-btn-group-responsive > .btn:last-child:not(:first-child) {
    border-radius: 0 0 6px 6px;
  }
  
  /* fixing margin */
  .btn-group.my-btn-group-responsive .btn + .btn {
    margin-left: 0;
  }
  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="btn-group btn-group-justified btn-group-lg my-btn-group-responsive">
    <a href="#" class="btn btn-primary"><font size="6">الدروس و التجارب</font></a>
    <a href="#" class="btn btn-primary"><font size="6">المنشورات و الكتب الشخصية</font></a>
    <a href="#" class="btn btn-primary"><font size="6">المدونة</font></a>
  </div>
</div>