Bootstrap 5 根据分辨率在特定位置中断按钮组

Question

如何在特定屏幕尺寸以下的按钮组的特定位置强制换行？我有 4 个按钮的按钮组。如果没有足够的 space.

，我想在第一个按钮之后将其分成两行

<div class="input-group" role="group">
  <div class="input-group-text" id="btnGroupAddon">
    <a class="btn btn-secondary" role="button">Add</a>
  </div>
     
  <!-- Line break when screen width<=600 -->
    
  <input type="text" class="form-control">

  <div class="input-group-text" id="btnGroupClear">
    <a href="#"><img src="backspace.svg" height="16px;" onclick="clearSearch()"></a>
  </div>

  <div class="input-group-text" id="btnGroupSearch">
    <a href="#"><img src="search.svg" height="16px;" onClick="submit()"></a>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

Answer 1

您会在 display:block 处使用 css；

Answer 2

你可以使用这个 SCSS:

@media (max-width: 576px) {
  .wrapping-group:not(#_) > * {
    &:first-child {
      flex: 1 0 100%;
      border-top-right-radius: 0.25rem;
      border-bottom-left-radius: 0;
      .btn {
        width: 100%;
      }
    }
    &:not(:first-child) {
      margin-top: -1px;
    }
    &.form-control {
      margin-left: 0;
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0;
    }
  }
}

工作演示：

@media (max-width: 576px) {
  .wrapping-group:not(#_)>*:first-child {
    flex: 1 0 100%;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
  }
  .wrapping-group:not(#_)>*:first-child .btn {
    width: 100%;
  }
  .wrapping-group:not(#_)>*:not(:first-child) {
    margin-top: -1px;
  }
  .wrapping-group:not(#_)>*.form-control {
    margin-left: 0;
    border-bottom-left-radius: 0.25rem;
  }
  .wrapping-group:not(#_)>*:last-child {
    border-top-right-radius: 0;
  }
}


/* not part of solution: */

body {
  padding: 5rem 1rem 1rem
}

<div class="input-group wrapping-group" role="group">
  <div class="input-group-text" id="btnGroupAddon">
    <a class="btn btn-secondary" role="button">Add</a>
  </div>

  <!-- Line break when screen width<=600 -->

  <input type="text" class="form-control">

  <div class="input-group-text" id="btnGroupClear">
    <a href="#"><img src="backspace.svg" height="16px;" onclick="clearSearch()"></a>
  </div>

  <div class="input-group-text" id="btnGroupSearch">
    <a href="#"><img src="search.svg" height="16px;" onClick="submit()"></a>
  </div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

您必须将 wrapping-group class 应用到您想要此行为的群组，因此它并不适用于所有 .input-group。
此外，我使用 Bootstrap 5 的 xs/sm 断点 (576px) 而不是 600px，但您可以将其更改为对您的情况有意义的任何值。

Bootstrap 5 根据分辨率在特定位置中断按钮组

Bootstrap 5 break button-group in specific place depending on resolution

css

responsive-design

bootstrap-5