Twitter bootstrap 以堆叠模式放置两组相邻的柱

我正在将一个网站改为响应性设计，并使用Bootstrap4。目前，我一行有4列，在大屏幕上看起来不错（我使用col-sm），但当它们切换到堆叠模式时，有很多空白我想用这些列填充

我的HTML中的相关部分：

CVV2代码
账单邮政编码

这可以通过嵌入

.row

s和

.col

s解决，如下所示：

CVV2代码
[ ]
账单邮政编码
[ ]

col-sm

专门用于小屏幕，而

col-md

用于平板电脑及更高版本

假设您希望在一行中为台式机显示四个元素，并将它们堆叠在两行中用于移动设备，那么您需要做的是将所有现有类替换为

md

，而不是

sm

，然后使用四个

col-sm-6

类：

CVV2代码
空白的
账单邮政编码
空白的

我刚刚应用了网格以获得所需的结果

.lab{
显示：块；
背景颜色：绿色；
边框：2倍纯红；
颜色：白色；
高度：40px；
线高：40px；
}
.文本{
显示：块；
背景颜色：蓝色；
边框：2倍纯红；
颜色：白色；
高度：40px；
线高：40px；
}

标签1
文本1
标签2
文本2

这几乎满足了我的需要。我希望列在xs设备上以相同的方式显示，所以我只是将所有的列sm-*更改为col-*就行了！