按两列输入600px媒体查询时显示两个数据产品

Question

大家好，任何人都可以在我的网页中帮助我解决我的问题我无法在 CSS/Bootrap 上通过两个列显示我的产品，我使用 bootstrap 4 我想自定义我的产品显示这里是我想要在我的输入 600px 媒体查询时的产品列表

输出

这是我现在的工作，我想在图片上这样显示
图像2图像3

Answer 1

马克 我使用 bootstrap 4 进行了一个类似的项目。首先，我将假设您将 bootstrap img-fluid 类用于卡片类中的图像。 接下来，在媒体查询中卡片类的 css 中，您需要设置一个 min-height 来覆盖任何卡片的最大高度，因此它们的偶数。 例如最小高度：350px； 接下来，您需要在 600px 媒体查询中为您的卡片类设置宽度。 我建议您在 google chrome 中使用移动响应模式并将其设置为 600px 宽，然后测试不同的像素宽度，直到正确为止。 如果您还没有使用过谷歌移动工具，请右键单击您的谷歌浏览器并选择检查。 在检查窗口中，单击左上角元素旁边的图标。 现在您在移动视图中。 在左侧的移动视图中，单击显示手机类型的下拉菜单，然后选择响应式。 将最大宽度设置为 600。这是代码。

@media only screen and (max-width: 600px) {
    .card {
        width: 48%;
        min-height: 200px;
}