响应式画廊不工作。如何使卡片响应？

Question

我一直在关注此W3 tutorial 以创建画廊视图。问题是它在移动设备上看起来很糟糕。它每行保留三张卡片，并使它们超级小......

我查看了bootstrap documentation on containers，看到了我尝试过的这个类名：

class="container-md" 

但这并没有让他们按照我想要的方式做出响应。它仍然保持他们三个连续。

然后我尝试删除这个 CSS：

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

但是每行只有一个大...并且看起来也破坏了排序按钮...

如果您想查看我的完整代码和 CSS，可以在这里查看：https://www.seekadventure.net/GearLocker.html

Answer 1

尝试将类 row row-cols-1 row-cols-sm-2 row-cols-md-3 添加到具有类 row 的行元素中，以使行响应。详情请查看document。