栅格

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
col-8
col-4
<div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col-3">1</div> <div class="col-3">2</div> <div class="col-3">3</div> <div class="col-3">4</div> <div class="col-3">5</div> <div class="col-3">6</div> <div class="col-3">7</div> <div class="col-3">8</div> </div> <div class="row"> <div class="col-8">col-8</div> <div class="col-4">col-4</div> </div>

间断

Column
Column
w-100
Column
Column
Column
Column
Column
Column
w-100
Column
Column
Column
Column
<div class="row"> <div class="col">Column</div> <div class="col">Column</div> <div class="w-100">w-100</div> <div class="col">Column</div> <div class="col">Column</div> </div> <div class="row"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="w-100">w-100</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div>

方向

对齐方式 样式名称 备注
左对齐 justify-content-start 等高
居中对齐 justify-content-center 等高
右对齐 justify-content-end 等高
右对齐 justify-content-end 等高
等份排列对其 justify-content-around 等高
两端对其 justify-content-between 等高


One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
<div class="row justify-content-start"> <div class="col-4">One of two columns</div> <div class="col-4">One of two columns</div> </div> <div class="row justify-content-center"> <div class="col-4">One of two columns</div> <div class="col-4">One of two columns</div> </div> <div class="row justify-content-end"> <div class="col-4">One of two columns</div> <div class="col-4">One of two columns</div> </div> <div class="row justify-content-around"> <div class="col-4">One of two columns</div> <div class="col-4">One of two columns</div> </div> <div class="row justify-content-between"> <div class="col-4">One of two columns</div> <div class="col-4">One of two columns</div> </div>