Bootstrap-v5-布局(水槽)
五、水槽(Gutters)
1、水平水槽(Horizontal gutters)
<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
<div class="container overflow-hidden"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
2、垂直水槽(Vertical gutters)
<div class="container overflow-hidden"> <div class="row gy-5"> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
3、水平和垂直水槽(Horizontal & vertical gutters)
<div class="container"> <div class="row g-2"> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> <div class="col-6"> <div class="p-3 border bg-light">Custom column padding</div> </div> </div> </div>
4、行列水槽(Row columns gutters)
<div class="container"> <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3"> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> <div class="col"> <div class="p-3 border bg-light">Row column</div> </div> </div> </div>
5、无水槽(No gutters)
<div class="row g-0"> <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>
参考官网:https://v5.bootcss.com/docs/layout/gutters/