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.

En esta página

Cómo trabajan ellos

Los canalones son los espacios entre el contenido de la columna, creados por horizontal padding. Establecemos padding-righty padding-leften cada columna, y usamos negativo marginpara 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 .containero si también se usan canales más grandes para evitar un desbordamiento no deseado, utilizando una utilidad de relleno coincidente. .container-fluidPor ejemplo, en el siguiente ejemplo hemos aumentado el relleno con .px-4:

Relleno de columna personalizado

html

<div class="container px-4 text-center">
  <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 .rowde la .overflow-hiddenclase:

Relleno de columna personalizado

html

<div class="container overflow-hidden text-center">
  <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 usar para controlar los anchos de medianil vertical dentro de una fila cuando las columnas se ajustan a nuevas líneas. Al igual que las medianías horizontales, las medianías verticales pueden provocar un desbordamiento debajo .rowdel final de una página. Si esto ocurre, agrega un contenedor .rowcon la .overflow-hiddenclase:

Relleno de columna personalizado

html

<div class="container overflow-hidden text-center">
  <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-hiddenclase contenedora.

Relleno de columna personalizado

html

<div class="container text-center">
  <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.

Fila columna

html

<div class="container text-center">
  <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. marginEsto elimina la s negativa .rowy la horizontal paddingde todas las columnas secundarias inmediatas.

¿Necesita un diseño de borde a borde? Suelte el padre .containero .container-fluidy agréguelo .mx-0a .rowpara evitar el desbordamiento.

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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 $guttersmapa de Sass que se hereda del $spacersmapa 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,
);