css - 在引导列上设置边距而不影响宽度

Question

我正在尝试显示卡片宽度 boostrap 的列表。我像这样制作了我的html：

<div class="card-deck">
    <div class="card card-widget col-sm-2 m-2">
        <div class="card-body text-center">
            TEXT
        </div>
    </div>
    <div>
        etc...
    </div>
</div>

问题是，边距似乎扩大了卡片的宽度。所以它会像这样......（它应该显示 4 cols）

屏幕 1

如果我删除边距，它会产生类似...

屏幕 2

谢谢你的帮助 ！

标签： csstwitter-bootstrapgridresponsive

Answer 1

感谢您的回答。但是它并没有解决我的问题:(

第一个解决方案：我不能轻易做到这一点，因为我从数据库中获取它们，所以我不知道将返回多少元素，我真的想每 4 张卡片制作一张新的卡片组。justify-content-center 不是很优雅，它转移了问题

第二个解决方案：它看起来像我的第二个屏幕：https ://i.stack.imgur.com/erkcT.jpg