为不同的引导断点设置不同的 CSS 约束答案

【问题标题】：setting different css constraints for different bootstrap breakpoints为不同的引导断点设置不同的 CSS 约束
【发布时间】：2021-02-25 01:38:33
【问题描述】：

我确定之前有人问过这个问题
但我认为我没有使用正确的逐字逐句进行良好的搜索
当我开始理解词汇来描述这个时，我会更新标题和动词

我正在使用引导程序来获得响应式布局
有一部分专栏我不一定要那么响应
这是它的样子

<div class="col-lg-6 col-med-4 col-sm-2 p-0">
      ... content ....
</div>

现在如果媒体断点=lg，我希望那部分列的最大宽度=870px

<div class="col-lg-6 col-med-4 col-sm-2 p-0 mxw870"></div>

其中 mxw870 只是一个设置 max-width=870px 的类；
但我不一定要这样做，因为那当然是
它还将 med 和 sm 断点设置为 max-width=870px
我真的希望它们各自的最大宽度为 480px 和 360px

我如何获得它以便如果媒体大小=lg 我的最大宽度设置为 870
如果媒体大小=md，我的最大宽度设置为 480px
如果媒体大小=sm，则最大宽度设置为 360 像素

【问题讨论】：

标签： css bootstrap-4 responsive-design

【解决方案1】：

这就是你要找的吗？

@media (min-width: 992px) {
  .row > .mxw870 {
    flex-basis: 870px;
    max-width: 870px;
  }
  .row > .mxw870 + * {
    flex-basis: calc(100% - 870px);
    max-width: calc(100% - 870px);
  }
}

/* rest is irrelevant, just for display purposes */

.mxw870 {
  background-color: #f5f5f5;
}

.row > * {
  min-height: 100px;
  box-shadow: inset 0 0 0 1px #eee;
}

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

<div class="container-fluid no-gutters">
  <div class="row">
    <div class="col-lg-6 col-md-4 col-sm-2 mxw870">
      Custom width on lg
    </div>
    <div class="col-lg-6 col-md-4 col-sm-2">
      Second column
    </div>
    <div class="col-lg-6 col-md-4 col-sm-2">
      Third column
    </div>
    <div class="col-lg-6 col-md-4 col-sm-2">
      Fourth column
    </div>
  </div>
</div>

【讨论】：