Css 在移动屏幕上仅引导一列

我正在尝试创建一个类似于另一个网站的徽标组合。在手机屏幕上，徽标从一行八个减少到每行四个，如下所示。我的代码在一个引导容器中

在桌面上

在手机上

我的电脑在桌面上运行良好，但当它变小时，它突然变成一排

桌面上的我的网站

我的移动站点

我希望在手机屏幕上至少有2-3个徽标排成一行。

<div class="container">
    <div class="row mt-5 text-center align-items-center">
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
    </div>
</div>

You should do like the comments. I tried and worked fine for me.

你应该喜欢这些评论。我努力了，工作得很好。

什么是

xm

？这不是引导断点。请你应该使用

col-3

而不是

col-xm-3

。这是一个打字错误，我编辑了它，但它对结果没有影响。再说一遍，你读过文档了吗？引导中不再有col-xs-3。它只是col-3，因为mobile（xs）是默认的默认断点。我将它改为col-3，它工作了，谢谢。这很奇怪，因为我到处都能看到（xs）。如果这是你想出的答案，请解释一下这是如何解决问题的。评论已经解释并修复了OP的问题。那是因为他之前写过“这是一个打字错误，我编辑了它，但它对结果没有影响”我认为他做不到，所以我做了，并说它对我有用。我从未意识到我找到了这个解决方案。如果我做错了什么，我很抱歉。不，你没有做错什么。它回答了这个问题。但它没有清楚地解释它是如何解决这个问题的。请考虑向注释和官方文档链接的用户添加一些解释、信用，以便未来读者得到明确的答案。大多数人不会读评论。未被接受的答案比评论中的答案更容易被用户阅读。

<div class="container">
    <div class="row mt-5 text-center align-items-center">
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2 col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
        <div class="mb-4 col-md-2  col-3"><img src="..."></div>
    </div>
</div>

You should do like the comments. I tried and worked fine for me.