css Bootstrap 5在特定位置断开按钮组(取决于分辨率)

beq87vna 于 2022-11-27 发布在 Bootstrap

关注(0)|答案(3)|浏览(110)

如何在特定屏幕尺寸下的按钮组的特定位置强制换行？我有一个一行有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>

css

来源：https://stackoverflow.com/questions/67487846/bootstrap-5-break-button-group-in-specific-place-depending-on-resolution

3条答案

按热度按时间

osh3o9ms1#

您可以使用此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;
    }
  }
}

工作演示：
第一次
您必须将wrapping-group类应用于您希望此行为的组，因此它不会应用于所有.input-group。
此外，我使用了Bootstrap 5的xs/sm断点（576px）而不是600px，但您可以将其更改为适合您的情况的任何断点。

赞(0）回复(0）举报 2022-11-27

new9mtju2#

@陶的回答真的很帮我，我修改了一下CSS，也许有人需要它，但对不起，我不能解释，我是新的CSS
第一个

赞(0）回复(0）举报 2022-11-27

5cg8jx4n3#

您应该在display：block中使用css;

赞(0）回复(0）举报 2022-11-27