Bootstrap 的 `col .col-md-4` class 在使用 `img-fluid` 时不起作用

Question

我希望我的 div 在我调整 window 大小时堆叠 - 因此我正在使用 col .col-md-4。在带有该已用标签的列中，我有一个图像，当我调整 window 大小时，我的屏幕按预期堆叠。但是，当我在我的标签中添加 img-fluid class 时，col .col-md-4 div 堆叠在 window 调整大小后停止工作。

Div 没有 img-fluid 的堆叠工作 class:

我尝试删除 img-fluid class 并为图像添加 width: 100% ，这也会停止 div 堆叠工作。

<div class="row">
  <div id="browImageContainer" class="col .col-md-4">
    <img class="browImage " src="/images/powderBrowSample.png">
  </div>
  <div class="col .col-md-4 border">
    content
  </div>
</div>

Div 堆叠不适用于 img-fluid class:

<div id="servicesRectangle"></div>
<div class="row">
  <div id="browImageContainer" class="col .col-md-4">
    <img class="browImage img-fluid" src="/images/powderBrowSample.png">
  </div>
  <div class="col .col-md-4 border">
    content
  </div>
</div>

总结：我希望我的 divs 在我使用 img-fluid 标签时堆叠！但事实并非如此！

预期结果：

Divs 堆叠，同时使用 img-fluid class 使我的图像响应。

Answer 1

为什么你的 class 名字中有 dot (col .col-md-4)？

您没有使用正确的 class 名称：col col-md-4

Answer 2

您必须删除 col-md-4 class 之前的点。那是一个无效的选择器。类总是写在HTML之前没有点。

那么它应该会像预期的那样工作。它与 img-fluid 无关。

Answer 3

我通过完全删除 col 和 col-md-4 class 并将其替换为 col-sm class.[=13 得到了我需要的东西=]

Bootstrap 的 `col .col-md-4` class 在使用 `img-fluid` 时不起作用

Bootstrap's `col .col-md-4` class does not work when using `img-fluid`

bootstrap-4

responsive