我的DIV为什么不响应行和列的断点？

Question

我正在网站上创建一行突出显示的产品。在桌面视图上，我有5种产品。当我使用中型设备时，我希望有2种产品，最后在移动设备上有1种产品。在阅读Grid System and Rows here上的Bootstrap文档之后，我添加了row-cols语法，但没有任何反应。我确定我遗漏了一些东西，但我无法弄清楚它是什么。另外，在我在此处显示的codepen项目中，产品的信息（图像和文本）受到挤压。

Here's我的CodePen。

这是我的计算机在桌面视图下的外观（看起来不错）

这是我缩小屏幕尺寸时在计算机上的外观。不好。

Answer 1

对此版本进行更改，您将拥有您的网格。并确保您将使用Bootstrap 4

<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-6 col-md-2">this</div>
        <div class="col-sm-6 col-md-2">is</div>
        <div class="col-sm-6 col-md-2">example</div>
        <div class="col-sm-6 col-md-2">use</div>
        <div class="col-sm-6 col-md-2">this</div>
    </div>
</div>

Answer 2

上面的评论做到了：

尝试一下。在两个不同的部分中为这些产品制作两个引导程序布局。一种用于大屏幕，另一种用于小屏幕。 （对于较小的屏幕，您可以根据自己的喜好定义3行或2行。）但请保持较小的屏幕布局不可见。在您的CSS中添加一个媒体查询，这将使较大的屏幕布局不可见，并在达到断点时使较小的屏幕布局可见。

Answer 3

您可以做的是使用媒体查询定义断点。这样，您可以根据屏幕的大小来定义应该有多少行以及如何划分列。