使用 `img-fluid` 时，引导程序`col .col-md-4` 类不起作用答案

【问题标题】：Bootstrap's `col .col-md-4` class does not work when using `img-fluid`使用 `img-fluid` 时，引导程序`col .col-md-4` 类不起作用
【发布时间】：2019-09-13 07:36:38
【问题描述】：

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

没有img-fluid类的Div堆叠工作：

我尝试删除 img-fluid 类并为图像添加了 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 类：

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

总结：当我使用 img-fluid 标签时，我希望我的 div 可以堆叠！但它没有！

预期结果：

使用img-fluid 类使我的图像响应时要堆叠的 Div。

【问题讨论】：

标签： bootstrap-4 responsive

【解决方案1】：

通过完全删除 col 和 col-md-4 类并将其替换为 col-sm 类，我得到了我需要的东西。

【讨论】：

【解决方案2】：

您必须在 col-md-4 类之前删除点。那是一个无效的选择器。在 HTML 中，类的前面总是不带点。

然后它应该像预期的那样工作。这与 img-fluid 无关。

【讨论】：

【解决方案3】：

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

你没有使用正确的类名：col col-md-4

【讨论】：