更改为 Bootstrap 默认 Col min-width 会影响响应式设计答案

【问题标题】：Change to Bootstrap default Col min-width affects responsive design更改为 Bootstrap 默认 Col min-width 会影响响应式设计
【发布时间】：2020-05-19 03:07:58
【问题描述】：

从 Bootstrap 4.4 升级到 4.5 后，我注意到列中的卡片曾经在屏幕尺寸变小时时做出响应，现在变成堆叠（即重叠）。

这似乎与 4.5 中的 CSS 更改有关，其中 col min-width 默认为 0。 https://github.com/twbs/bootstrap/pull/30049

在此示例中，只需在 4.4.1（响应式）和 4.5（堆叠式）之间更改 CSS 引导设置即可查看效果 https://codepen.io/alonergan/pen/BaoGqwO

想问一下其他人是否注意到了这一点，这是预期的结果还是 bootstrap 4.5 中的回归？

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row mt-5">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

这看起来是正确的行为，那么您希望卡片在屏幕尺寸减小时发生什么？
该示例使用了 bootstrap 4.4，它的行为正确。我将示例修改为使用 4.5，以说明卡片重叠的新行为。
重叠？意思是一张卡在另一张上面？我没有看到我所看到的行为只是减小它包裹的屏幕尺寸并使其成为单列
能否建议您刷新页面并重新运行 sn-p，以确认我在示例中从 BS 4.4 到 4.5 所做的更改是否有效？
感谢您的意见。我发现我的代码的一个更好的解决方案是添加/覆盖 col min-width，例如 min-width: 18rem （或者确实坚持使用旧的 BS 版本）。

标签： css bootstrap-4

【解决方案1】：

弹性项目的最小宽度等于它们的内容，换句话说，弹性项目不能小于它所容纳的内容。如果您愿意，可以使用 min-width:content 之类的东西。 （高度也是如此）

Bootstrap 4.4 识别该约束，但是 Bootstrap 4.5 在 .col 上用 min-width:0 覆盖它

解决方法很简单，我们明确表示要尊重内容

.col { min-width:auto !important; }

.col{
  min-width:auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row mt-5">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

注意：我只是查看代码来识别差异，我不知道引导程序是否确实提到了这一点。

【讨论】：

【解决方案2】：

您现在还可以升级到 Bootstrap 4.5.1 来解决这个问题。问题https://github.com/twbs/bootstrap/pull/30999 已修复。完整更新日志：https://github.com/twbs/bootstrap/releases/tag/v4.5.1

【讨论】：