添加边距时如何停止引导列溢出到下一行答案

【问题标题】：How to stop bootstrap columns overflowing to next row when adding a margin添加边距时如何停止引导列溢出到下一行
【发布时间】：2021-01-19 19:37:30
【问题描述】：

见下面3列大小col-4

我想添加一个边距，这样边框就不会接触，但是当我向它们添加 mx-3 时，最后一列会溢出到下一行，这是我不希望发生的。

无边距

带边距（我希望它看起来如何，但所有 3 列都在同一行）

我知道边距会增加元素的宽度 - 但是...是否有一种简单的解决方案可以阻止这种情况的发生（即，将它们全部保持在一行？）而不更改 'col-4' 类？

我已经厌倦了在行上设置一个排水沟（不确定这是否正确）但似乎没有任何效果。

代码在这里。

【问题讨论】：

【解决方案1】：

行类应该是：

<div class="row justify-content-center">

列类应该是：

<div class="col-md-3 border">
<div class="col-md-3 border offset-md-1">
<div class="col-md-3 border offset-md-1">

【讨论】：

【解决方案2】：

将<div class="col-md-4 border"> 更改为<div class="col-md-3 border" style="margin:30px;">

或

请检查一次，希望对您有所帮助

【讨论】：