沟槽
Gutter这个词实在想不到该怎么翻译比较合适,这里直接翻译成沟槽,凑合着看吧。
沟槽是列之间的内边距,用于响应式空间和对齐 Bootstrap 栅格系统中的内容。
水平沟槽
.gx-*
类可用于控制水平边距宽度。如果也使用较大的沟槽以避免不必要的溢出,则可能需要调整 .container
或 .container-fluid
父级,使用匹配的内边距实用程序。例如,在以下示例中,我们使用 .px-4
增加了内边距:
自定义列内边距
自定义列内边距
<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col"> <div class="p-3 border bg-light">自定义列内边距</div> </div> </div> </div>
另一种解决方案是使用 .overflow-hidden
类在 .row
周围添加一个包装器:
自定义列内边距
自定义列内边距
<div class="container overflow-hidden"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col"> <div class="p-3 border bg-light">自定义列内边距</div> </div> </div> </div>
垂直沟槽
.gy-*
类可用于控制垂直沟槽宽度。与水平沟槽一样,垂直沟槽可能会导致页面末尾的 .row
下方出现一些溢出。如果发生这种情况,请使用 .overflow-hidden
类在 .row
周围添加一个包装器:
自定义列内边距
自定义列内边距
自定义列内边距
自定义列内边距
<div class="container overflow-hidden"> <div class="row gy-5"> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> </div> </div>
水平和垂直沟槽
.g-*
类可用于控制水平沟槽宽度,对于以下示例,我们使用较小的沟槽宽度,因此无需添加 .overflow-hidden
包装类。
自定义列内边距
自定义列内边距
自定义列内边距
自定义列内边距
<div class="container"> <div class="row g-2"> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> <div class="col-6"> <div class="p-3 border bg-light">自定义列内边距</div> </div> </div> </div>
行列沟槽
沟槽类也可以添加到行列中。在以下示例中,我们使用响应式行列和响应式沟槽类。
行列
行列
行列
行列
行列
行列
行列
行列
行列
行列
<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">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> <div class="col"> <div class="p-3 border bg-light">行列</div> </div> </div> </div>
没有沟槽
我们预定义的网格类中的列之间的沟槽可以使用 .g-0
删除。这将删除 .row
的负边距和所有直接子列的水平内边距。
需要边缘到边缘的设计?删除父 .container
或 .container-fluid
并将 .mx-0
添加到 .row
以防止溢出。
在实践中,它看起来是这样的。请注意,您可以继续将其与所有其他预定义的栅格类(包括列宽、响应层、重新排序等)一起使用。
.col-sm-6 .col-md-8
.col-6 .col-md-4
<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>