列填充(Gutters)

admin

一.Sass开发
$grid-gutter-width: 1.5rem;

$gutters: (
        0: 0,
        1: $spacer * .25,
        2: $spacer * .5,
        3: $spacer,
        4: $spacer * 1.5,
        5: $spacer * 3,
);

二.填充分类
0.g-0 gx-0 gy-0
1.g-1 gx-1 gy-1
2.g-2 gx-2 gy-2
3.g-3 gx-3 gy-3
4.g-4 gx-4 gy-4
5.g-5 gx-5 gy-5

三.填充六个断点
1.xs g-n
2.sm g-sm-n
3.md g-md-n
4.lg g-lg-n
5.xl g-xl-n
6.xxl g-xxl-n

四.Horizontal gutters(水平填充)
1.gx-5
<div class="row gx-5">

2.避免container溢出
#overflow-hidden
<div class="container overflow-hidden">

五.Vertical gutters(垂直填充)
#gy-5
<div class="row gy-5">

六.Horizontal & vertical gutters(水平和垂直填充)
#g-2
<div class="row g-2">

七.Row columns gutters(行列填充)
#g-2
<div class="row row-cols-2 g-2">

八.No gutters(无填充)
#g-0
<div class="row g-0">