html - 每行设置一张卡片 Bootstrap 4

Question

我试图让 Bootstrap 在小屏幕上每行显示 1 张卡片，在中等屏幕上每行显示 2 张卡片，在大屏幕上每行显示 3 张卡片。

我正在尝试使用 <div class="col-sm-12 col-md-6 col-lg-4"> 来做到这一点这适用于中型和大型屏幕，但对于小尺寸屏幕，它仍然显示 2，而不是每行 1 张卡片。

我还想让导航栏在最小尺寸的屏幕上移动到顶部，并在所有其他尺寸的屏幕上保持在左侧。我相信这与卡片的问题相同。

这是我的代码的链接:https://codepen.io/anon/pen/ZPQWKd

Answer 1

对于手机你可以尝试使用col-xs类..

所以改为

<div class="col-sm-12 col-md-6 col-lg-4">

你可以使用

<div class="col-sm-12 col-md-6 col-lg-4 col-xs-12">

您可以在此处查看更多文档 https://getbootstrap.com/docs/4.1/layout/grid/