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.

Nesta páxina

Como funcionan

As cunetas son os espazos entre o contido da columna, creados por horizontal padding. Establecemos padding-righte padding-leften cada columna e usamos negativo marginpara 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 .containerou o pai se tamén se usan canaletas máis grandes para evitar desbordamentos non desexados, utilizando unha utilidade de recheo correspondente. .container-fluidPor exemplo, no seguinte exemplo aumentamos o recheo con .px-4:

Recheo de columnas 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>

Unha solución alternativa é engadir un envoltorio ao redor .rowda .overflow-hiddenclase:

Recheo de columnas 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>

Canaletas verticais

.gy-*as clases pódense usar para controlar os anchos de canaletas verticais dentro dunha fila cando as columnas se envolven en liñas novas. Do mesmo xeito que os canlóns horizontais, os canlóns verticais poden provocar un desbordamento debaixo .rowdo final dunha páxina. Se isto ocorre, engade un envoltorio .rowcoa .overflow-hiddenclase:

Recheo de columnas 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>

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 haberá que engadir a .overflow-hiddenclase de envoltura.

Recheo de columnas 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>

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.

Columna da fila

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>

Sen cunetas

As cunetas entre columnas nas nosas clases de cuadrícula predefinidas pódense eliminar con .g-0. Isto elimina o margins negativo .rowe o horizontal paddingde todas as columnas fillas inmediatas.

Necesitas un deseño de punta a punta? Solta o pai .containerou .container-fluide engádeo .mx-0ao .rowpara evitar desbordamento.

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

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

Cambia as cunetas

As clases constrúense a partir do $guttersmapa Sass que se herda do $spacersmapa Sass.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);