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

5q4ezhmt 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(3)|浏览(157)

见以下3列，尺寸为col-4
我想添加一个边距，使边界不接触，但当我添加mx-3到他们的最后一列溢出到下一行，这是我不希望发生的事情。
无余量

带边距（我希望它的外观，但所有3列都在同一行上）

我知道边距增加了元素的宽度-但是...有没有一个简单的解决方案来阻止这种情况的发生（即保持它们都在一行？）
我已经厌倦了设置一个排水沟的行（不知道这是正确的），但似乎没有工作。
代码在这里。
https://codepen.io/lewis-morris/pen/RwGdwdR

3条答案

您可以使用偏移类。请访问https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns。
行类应为：

<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="col-md-4 border">更改为<div class="col-md-3 border" style="margin:30px;">
或
请检查一次，希望对您有所帮助
https://www.codeply.com/go/LN7xDgslxh/bootstrap-4-space-between-columns

我唯一能够解决这个问题的方法是添加一个额外的行和列的级别，这样我就能够创建第一级的布局，然后我添加边距或填充到第二级。
请看下面一个例子，我如何解决这个问题的Bootstrap 5。这将是几乎相同的Bootstrap 4。
https://www.codeply.com/p/TVlhlZoGhm