如何使 Bootstrap 3 按钮组响应？答案

【问题标题】：How can I make a Bootstrap 3 button group responsive?如何使 Bootstrap 3 按钮组响应？
【发布时间】：2017-08-06 06:03:01
【问题描述】：

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

这是我的代码。

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案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>

【讨论】：

不错的解决方案。现在状态很好

【解决方案2】：

如果我的问题是正确的，那么您希望每行都有一个按钮。使用引导程序，您可以执行以下操作并打开一些行并将您的按钮插入其中。

<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 btn-group-vertical">
    <div class="row">
      <a href="#" class="btn btn-primary">
        <font size="6">الدروس و التجارب</font>
      </a>
    </div>
    <div class="row">
      <a href="#" class="btn btn-primary">
        <font size="6">المنشورات و الكتب الشخصية</font>
      </a>
    </div>
    <div class="row">
      <a href="#" class="btn btn-primary">
        <font size="6">المدونة</font>
      </a>
    </div>

  </div>
</div>

您还可以将 col 类添加到按钮并为每个按钮选择列尺寸，如下所示：

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <button>[...]</button>
        <button>[...]</button>
    </div>
</div>

【讨论】：