Html 如何在添加边距时阻止引导列溢出到下一行

请参见以下3列大小

col-4

我想添加一个边距，使边框不接触，但是当我添加

mx-3

到边距时，最后一列溢出到下一行，这是我不想发生的

无边无际

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

我知道边距增加了元素的宽度-但是。。。有没有一个简单的解决方案来阻止这种情况的发生（即，将它们都放在一行？）而不改变“col-4”类

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

代码在这里

将

更改为

或

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

将

更改为

或

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

---

您可以使用偏移类。访问

行类应为：

<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">

列类应为：

<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">

---

您可以使用偏移类。访问

行类应为：

<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">

列类应为：

<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">

这是你问题的答案吗？这是你问题的答案吗？使用

gap

规则css。使用

gap

规则css。