Html 如何在bootstrap'；这是第二排吗？

我创建了一个显示徽标的“网格”。一些徽标是.svg，另一些是.png。我正在起诉bootstrap的

行列

来创建这个网格。在桌面上，我使用的是

row-cols-lg-3

，它工作正常，有3列。在移动设备中，我需要它有两列，所以我使用

row-cols-sm-2

。但是，它只显示一列。徽标需要响应，所以我想使用%而不是px设置其宽度。当我使用px时，这两个列工作得很好。当我使用%时，实际上有些徽标甚至消失了

这就是我希望用

width:x%

而不是

width:ypx

上图显示了我使用%时得到的结果（注意，其他徽标已消失）：

这是我的密码：

/*用于桌面视图的CSS*/
.标志网格img{
宽度：100%；
填充：15px0；
}
/*响应式CSS*/
.标志网格{
宽度：100%；
保证金：0自动；
}
.标志网格img{
宽度：100%；
}

这是您正在尝试做的事情还是您想做其他事情

.logo网格img{
宽度：100%；
填充：15px0；
}
/*响应式CSS*/
.标志网格{
宽度：100%；
保证金：0自动；
}
.标志网格img{
宽度：100%；
}

问题：

问题是您没有为小于576px的屏幕设置
row-cols
类（
sm
breakpoint）—您尝试使用
row-cols-xs-2
，但在引导程序4中没有
xs
断点。这意味着在小屏幕上应用默认的
行cols
CSS，并尝试将所有徽标放在一行中（因为这些类使用flexbox）。。。它们“消失”的原因是因为它们太小了，装不下

如何解决：

您只需将
row-cols-2
添加到
row
div中，这样它就可以在较小的屏幕上使用2个col。此外，您不需要为每个断点设置行COL-较小的断点将应用，直到它到达较大的断点：

<div class="row row-cols-lg-3 rows-cols-2 logo-grid">



引导程序没有响应映像类
img流体
？我已将
img流体
类添加到
中，但它仍然不起作用：（您仍然有其他类在图像上定义宽度。问题不在于图像，而在于
row-cols
类。您正试图在小屏幕上使用
row-cols-xs-2
，但它不存在。您只需要一个简单的更改就可以实现此功能-我在回答中已对此进行了解释：）是的，这正是我所需要的。我的代码和你的代码一样，但我并不是所有的徽标都显示出来。你认为这与其中一些是.png和其他.svg有关吗？嗯，我不认为图像格式与此有关。可能是图像的大小导致了这个问题？或者你在其他地方覆盖了它？我删除了我的
col
从divs中添加了您建议的
文本中心
，效果很好。谢谢！！！很好的解释！非常感谢！