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

Question

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

Here's 我的 CodePen。

这是它在我的电脑上的样子，桌面视图（看起来不错）

这是我将屏幕尺寸缩小后在我的电脑中的样子。不好。

Answer 1

您可以做的是使用媒体查询定义断点。通过这种方式，您可以根据屏幕的大小来定义应该有多少行以及应该如何跨越列。

Answer 2

对此版本进行更改，您将拥有自己的网格。并确保你将使用 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 3

上面的评论做到了：

试试这个。在两个不同的部分中对这些产品进行两个 bootstrap 布局。一种用于大屏幕，另一种用于小屏幕。（对于较小的屏幕，您可以根据您的喜好定义 3 行或 2 行）但要保持小屏幕布局不可见。向您的 CSS 添加一个媒体查询，这将使大屏幕布局不可见，并在到达断点时使小屏幕布局可见。

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

Why aren't my DIV's responding to row and columns break points?

html

css

grid-layout

bootstrap-4