如何使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用于小于桌面的任何断点.如果您愿意,可以轻松修改.如果你想阅读有关媒体查询的更多信息,我可以推荐这篇MDN文章(链接转到部分关于宽度,但所有文章都很有趣).

@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>