Skip to main content

栅格

12 列布局#

6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
<div class="container">
<div class="row">
<div class="col col--6">6</div>
<div class="col col--6">6</div>
</div>
<div class="row">
<div class="col col--4">4</div>
<div class="col col--4">4</div>
<div class="col col--4">4</div>
</div>
<div class="row">
<div class="col col--3">3</div>
<div class="col col--3">3</div>
<div class="col col--3">3</div>
<div class="col col--3">3</div>
</div>
<div class="row">
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
<div class="col col--2">2</div>
</div>
<div class="row">
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
<div class="col col--1">1</div>
</div>
</div>

等宽#

col
col
col
col
col
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>

列偏移#

col--1
col--2 col--offset-1
col--3 col--offset-2
col--2
col--2 col--offset-2
col--4 col--offset-2
col--3
col--6 col--offset-3
<div class="container">
<div class="row">
<div class="col col--1">col--1</div>
<div class="col col--2 col--offset-1">col--2 col--offset-1</div>
<div class="col col--3 col--offset-2">col--3 col--offset-2</div>
</div>
<div class="row">
<div class="col col--2">col--2</div>
<div class="col col--2 col--offset-2">col--2 col--offset-2</div>
<div class="col col--4 col--offset-2">col--4 col--offset-2</div>
</div>
<div class="row">
<div class="col col--3">col--3</div>
<div class="col col--6 col--offset-3">col--6 col--offset-3</div>
</div>
</div>

列之间无间隔(Gutter)#

col
col
col
col
col
col--3
col--4
col--5
<div class="container">
<div class="row row--no-gutters">
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row row--no-gutters">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row row--no-gutters">
<div class="col col--3">col--3</div>
<div class="col col--4">col--4</div>
<div class="col col--5">col--5</div>
</div>
</div>