html - bootstrap 4 按钮组响应

Question

你好，

我对 Bootstrap 按钮组有一点疑问。可能我做错了什么或者我忽略了一些事情。但是我在这里有点死胡同。所以我希望有人能对这个话题有所启发。

我在 Bootstrap 组中设置了几个按钮。这些按钮很好地对齐并按应有的方式显示。手机除外。

但是，当我调整窗口大小时，我注意到按钮保持水平对齐。它们不会自动形成一行，例如 bootstrap 列。

这正是我想要的。因为我希望这些按钮形成一个也可以在手机上使用的工具栏。

<div class="container">
  <div class="row">
    <div class="col-md-12">
            <div class="btn-group mr-2" role="group" aria-label="button group">
            <button type="button" class="btn btn-default">button one</button>
        <button type="button" class="btn btn-default">button two</button>
        <button type="button" class="btn btn-default">button three</button>
        <button type="button" class="btn btn-default">button four</button>
        <button type="button" class="btn btn-default">button five</button>
        <button type="button" class="btn btn-default">button six</button>
      </div>
    </div>
  </div>
</div>

接受上面的代码。

生成以下内容:

但是在调整我得到的东西的大小时:

虽然我希望按钮能够调整大小或以适合作为手机工具栏的方式排序。

Answer 1

您需要实际调整容器网格内按钮的大小。

https://getbootstrap.com/docs/4.3/layout/grid/

<div class="container">
  <div class="col-md-12">
    <div class="btn-group row" role="group" aria-label="button group">
      <button type="button" class="btn btn-default col-md-2">button one</button>
      <button type="button" class="btn btn-default col-md-2">button two</button>
      <button type="button" class="btn btn-default col-md-2">button three</button>
      <button type="button" class="btn btn-default col-md-2">button four</button>
      <button type="button" class="btn btn-default col-md-2">button five</button>
      <button type="button" class="btn btn-default col-md-2">button six</button>
    </div>
  </div>
</div>