栅格

<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>

间断

<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	等高

<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>