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

5q4ezhmt  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(3)|浏览(155)

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

带边距(我希望它的外观,但所有3列都在同一行上)

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

ogq8wdun

ogq8wdun1#

您可以使用偏移类。请访问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">
p5fdfcr1

p5fdfcr12#

<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

4sup72z8

4sup72z83#

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

相关问题