Question

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

Div Stacking无需使用img-fluid类：

我尝试删除img-fluid类，并添加了宽度：图像的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。

Answer 1

为什么您的班级名称（dot中有col .col-md-4？

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

Answer 2

您必须删除col-md-4类之前的点。多数民众赞成在一个无效的选择器。在HTML中，类始终以点号开头。

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

Answer 3

哇，我太荒谬了！用户错误提示！谢谢你的好眼睛！毕竟，这是一个简单的花费，所以花了很多时间在Stack Overflow上找到最复杂的解决方案！

通过完全删除col和col-md-4类并将其替换为col-sm类，可以得到所需的内容。谢谢！

当使用`img-fluid`时，Bootstrap的`col .col-md-4`类不起作用

3 个答案: