在Bootstrap 4中,可以使用内置的CSS类来添加列之间的边距。Bootstrap 4使用了flexbox布局,通过使用row
和col-*
类来创建网格系统。
要在列之间添加边距,可以使用gutter
类。gutter
类有以下几种选项:
gx-*
:用于水平方向的列之间的边距。gy-*
:用于垂直方向的行之间的边距。g-*
:用于水平和垂直方向的列和行之间的边距。其中,*
可以是以下数值之一:
0
:表示没有边距。1
:表示较小的边距。2
:表示默认的边距。3
:表示较大的边距。4
:表示更大的边距。5
:表示最大的边距。例如,要在列之间添加默认边距,可以在row
类中添加gutter
类,如下所示:
<div class="row gutter">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
</div>
如果想要自定义边距大小,可以使用gx-*
、gy-*
或g-*
类,并将*
替换为所需的数值。例如,要在列之间添加较大的水平边距,可以使用gx-3
类,如下所示:
<div class="row gx-3">
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
</div>
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云