Canaletas
As cunetas son o recheo entre as túas columnas, que se usan para espaciar e aliñar o contido de forma sensible no sistema de grade Bootstrap.
Como funcionan
-
As cunetas son os espazos entre o contido da columna, creados por horizontal
padding
. Establecemospadding-right
epadding-left
en cada columna e usamos negativomargin
para compensalo ao comezo e ao final de cada fila para aliñar o contido. -
As cunetas comezan a
1.5rem
(24px
) de ancho. Isto permítenos facer coincidir a nosa reixa coa escala de espaciadores de recheo e marxe . -
As cunetas pódense axustar de forma sensible. Use clases de canaletas específicas de puntos de interrupción para modificar canaletas horizontais, cunetas verticais e todas as cunetas.
Canaletas horizontais
.gx-*
Pódense usar clases para controlar os anchos horizontais das cunetas. É posible que teña que axustar o .container
ou o pai se tamén se usan canaletas máis grandes para evitar desbordamentos non desexados, utilizando unha utilidade de recheo correspondente. .container-fluid
Por exemplo, no seguinte exemplo aumentamos o recheo con .px-4
:
<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>
Unha solución alternativa é engadir un envoltorio ao redor .row
da .overflow-hidden
clase:
<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>
Canaletas verticais
.gy-*
Pódense usar clases para controlar os anchos verticais das cunetas. Do mesmo xeito que os canlóns horizontais, os canlóns verticais poden provocar un desbordamento debaixo .row
do final dunha páxina. Se isto ocorre, engade un envoltorio .row
coa .overflow-hidden
clase:
<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>
Canaletas horizontais e verticais
.g-*
pódense usar clases para controlar os anchos de canalón horizontais, para o seguinte exemplo usamos un ancho de canalón menor, polo que non será necesario engadir a .overflow-hidden
clase de envoltura.
<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>
Columnas de fila canlóns
Tamén se poden engadir clases de canal ás columnas de filas . No seguinte exemplo, usamos columnas de filas sensibles e clases de canalóns receptivas.
<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>
Sen cunetas
As cunetas entre columnas nas nosas clases de cuadrícula predefinidas pódense eliminar con .g-0
. Isto elimina o margin
s negativo .row
e o horizontal padding
de todas as columnas fillas inmediatas.
Necesitas un deseño de punta a punta? Deixa o pai .container
ou .container-fluid
.
Na práctica, velaí como se ve. Teña en conta que pode seguir usándoo con todas as outras clases de grade predefinidas (incluíndo o ancho de columna, os niveis de resposta, as reordenacións e moito máis).
<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>
Cambia as cunetas
As clases constrúense a partir do $gutters
mapa Sass que se herda do $spacers
mapa Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);