canalones
Los canalones son el relleno entre las columnas, que se utilizan para espaciar y alinear de manera receptiva el contenido en el sistema de cuadrícula de Bootstrap.
Cómo trabajan ellos
-
Los canalones son los espacios entre el contenido de la columna, creados por horizontal
padding
. Establecemospadding-right
ypadding-left
en cada columna, y usamos negativomargin
para compensar eso al principio y al final de cada fila para alinear el contenido. -
Los canalones comienzan en
1.5rem
(24px
) de ancho. Esto nos permite hacer coincidir nuestra cuadrícula con la escala de espaciadores de margen y relleno . -
Los canalones se pueden ajustar de forma sensible. Utilice clases de medianil específicas de puntos de interrupción para modificar medianías horizontales, medianías verticales y todas las medianías.
canalones horizontales
.gx-*
Las clases se pueden utilizar para controlar los anchos de los canalones horizontales. Es posible que sea necesario ajustar el elemento primario .container
o si también se usan canales más grandes para evitar un desbordamiento no deseado, utilizando una utilidad de relleno coincidente. .container-fluid
Por ejemplo, en el siguiente ejemplo hemos aumentado el relleno 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>
Una solución alternativa es agregar un contenedor alrededor .row
de la .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>
Canalones verticales
.gy-*
Las clases se pueden utilizar para controlar los anchos de los canalones verticales. Al igual que las medianías horizontales, las medianías verticales pueden provocar un desbordamiento debajo .row
del final de una página. Si esto ocurre, agrega un contenedor .row
con la .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>
Canalones horizontales y verticales
.g-*
Las clases se pueden usar para controlar los anchos de medianil horizontal, para el siguiente ejemplo usamos un ancho de medianil más pequeño, por lo que no será necesario agregar la .overflow-hidden
clase contenedora.
<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>
Canalones de columnas de fila
Las clases de medianil también se pueden agregar a las columnas de fila . En el siguiente ejemplo, usamos columnas de fila de respuesta y clases de medianil de respuesta.
<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>
Sin canaletas
Los canalones entre columnas en nuestras clases de cuadrícula predefinidas se pueden eliminar con .g-0
. margin
Esto elimina la s negativa .row
y la horizontal padding
de todas las columnas secundarias inmediatas.
¿Necesita un diseño de borde a borde? Suelte el padre .container
o .container-fluid
.
En la práctica, así es como se ve. Tenga en cuenta que puede continuar usándolo con todas las demás clases de cuadrícula predefinidas (incluidos los anchos de columna, los niveles de respuesta, los reordenamientos y más).
<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>
cambiar las canaletas
Las clases se crean a partir del $gutters
mapa de Sass que se hereda del $spacers
mapa de Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);