C# 如何始终获得相同的列大小和响应能力？

我正在建立一个网站，但我有一个问题，我不能修复。我有多张卡片，里面的信息在列中，每4列，它们切换到另一行。问题是，卡片的数量可以改变，而且它并不总是可以被4整除。因此，在最后，我可以在一行中有少于4列。当一行中有少于4列时，显示与一行中有4列时不同。我知道这是因为我使用了

col-sm

bootstrap类。这是我发现的唯一一种反应简单的方法。我也尝试过使用

col-sm-3

，但问题是该网站的响应性不强。（见截图）顺便说一句，我使用razor视图来编写C#和HTML

当我使用

col sm

时，显示器会做什么：

我想要的是：

col-sm-3的问题：

这是显示我的卡的代码：

。车载卡{
边界半径：10px；
边框：实心4px#2F3136；
背景色：#333333；
}
.车身{
身高：5公分；
}
.车辆名称{
背景色：#392A49；
颜色：#B8BABD；
宽度：10em；
保证金：自动；
填充：3倍；
边界半径：10px；
边框：实心4px#2F3136；
}
.车辆图像{
边界半径：10px；
边框：实心4px#2F3136；
}

VOITURES契约
@foreach（模型中的var car.cars）
{
如果（计数器！=0&&计数器%4==0）
{
@:
@:
}
@车，名字
计数器++；
}

您应该能够使用引导功能获得所需的布局

您想要的布局的图像比Bootstrap-4随容器xl提供的图像大（Bootstap-5有一个容器xxl），但您可以创建自己的xxl容器（我的示例的最大宽度为1440px，但您可以更改）

身体{
背景色：#212121；
颜色：#fff；
}
h1{
颜色：#B8BABD；
}
人力资源{
宽度：10%；
边框顶部：5px实心#392A49；
} 
.集装箱xxl{
宽度：100%；
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
@介质（最小宽度：1500px）{
.集装箱xxl{
最大宽度：1440px；
}
}
.车辆卡{
边界半径：10px；
边框：实心4px#2F3136；
背景色：#333333；
}
.车身{
身高：5公分；
}
.车辆名称{
背景色：#392A49；
颜色：#B8BABD；
宽度：100%；
文本对齐：居中；
填充：3倍；
边界半径：10px；
边框：实心4px#2F3136；
}
.车辆图像{
边界半径：10px；
边框：实心4px#2F3136；
}
VOITURES契约

布利斯塔
半吊子
伊西
潘托
大草原
狂想曲

我不知道侠盗猎车手，但我知道宽屏显示器。