时间戳

首页 > 解决方案 > Bootstrap 5 根据分辨率在特定位置中断按钮组

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

问题描述

如何在特定屏幕尺寸下方的按钮组的特定位置强制换行？我有一个按钮组，有 4 个按钮。如果没有足够的空间，我想在第一个按钮之后将它分成两行。

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

标签： cssresponsive-designbootstrap-5

解决方案

你可以使用这个 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-groupclass 应用于您想要此行为的组，因此它不适用于所有.input-groups。
此外，我使用了 Bootstrap 5 的 xs/sm 断点 ( 576px)，600px但您可以将其更改为对您的情况有意义的任何内容。

推荐阅读