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>

Answer 2

如果我的问题是正确的，那么每行都需要一个按钮。使用bootstrap，您可以执行以下操作并打开一些行并将按钮插入其中。

＆＃13;

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

＆＃13;

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

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

如何使Bootstrap 3按钮组响应？

2 个答案: