按钮组在太长时不换行

Question

我有一个很长的按钮组：https://jsfiddle.net/cyu4bvak/

<div class="btn-group" data-toggle="buttons">
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    ...
</div>

无论视口的大小如何，它总是占用一条导致滚动的长行。

是否可以使其换行，以便在较小的视口上换行更多行而不会导致滚动？

如果没有，我必须采用哪种替代方法才能获得预期的行为？

Answer 1

如果您希望 flex 子级换行，请将 flex-wrap: wrap; 添加到 flex 父级 (.btn-group)。

Answer 2

对于 React-Bootstrap 用户：

<ButtonGroup style={{ flexWrap: "wrap" }}>
...
</ButtonGroup>

Answer 3

在 Bootstrap 5 中，您可以将 flex-wrap class 添加到具有 btn-group 的元素。

Answer 4

在容器上使用 flex-wrap: wrap; 是一个很好的选择，尽管有时我觉得使用不同大小的按钮看起来很奇怪：

如果在每个按钮上也设置 flex: 0 !important; 会好一点，但锯齿状的块仍然不吸引我:

有时，对于低于特定宽度的屏幕，我更喜欢垂直列的按钮。例如：

@media screen and (max-width: 600px) {
  .btn-group {
    flex-direction: column;
  }
}

再多几个样式，你也可以得到漂亮的圆角：

完整代码如下：

/* Responsive: Use a vertical column if under 450px wide */
@media screen and (max-width: 450px) {
  .btn-group {
    flex-direction: column;
  }
  .btn-group .btn {
    border-radius: 0 !important;
    margin-left: 0px !important;
    margin-top: -1px !important;
  }
  .btn-group .btn:first-child {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }
  .btn-group .btn:last-child {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h2>Responsive Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-outline-primary">Samsung</button>
    <button type="button" class="btn btn-outline-primary">Apple</button>
    <button type="button" class="btn btn-outline-primary">Xiaomi</button>
    <button type="button" class="btn btn-outline-primary">Huawei</button>
    <button type="button" class="btn btn-outline-primary">Oppo</button>
    <button type="button" class="btn btn-outline-primary">Vivo</button>
  </div>
</div>

P.S。如果不清楚，flex-direction: column; 和 flex-wrap: wrap; 都适用于 btn-group 和 btn-group-toggle。

按钮组在太长时不换行

Button group not wrapping when too long

css

twitter-bootstrap

responsive-design

twitter-bootstrap-4

buttongroup