Calhas

Gutters são o preenchimento entre suas colunas, usado para espaçar e alinhar o conteúdo de forma responsiva no sistema de grade do Bootstrap.

Nesta página

Como eles trabalham

Gutters são as lacunas entre o conteúdo da coluna, criadas por horizontal padding. Definimos padding-righte padding-leftem cada coluna e usamos negativo marginpara compensar isso no início e no final de cada linha para alinhar o conteúdo.
As calhas começam em 1.5rem( 24px) de largura. Isso nos permite combinar nossa grade com a escala de espaçamento de preenchimento e margem .
As calhas podem ser ajustadas responsivamente. Use classes de medianiz específicas de ponto de interrupção para modificar medianizes horizontais, verticais e todas as medianizes.

Calhas horizontais

.gx-*classes podem ser usadas para controlar as larguras da calha horizontal. O pai .containerou .container-fluidpode precisar ser ajustado se calhas maiores também forem usadas para evitar transbordamento indesejado, usando um utilitário de preenchimento correspondente. Por exemplo, no exemplo a seguir, aumentamos o preenchimento com .px-4:

Preenchimento de coluna 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>

Uma solução alternativa é adicionar um wrapper ao redor do .rowcom a .overflow-hiddenclasse:

Preenchimento de coluna 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>

Calhas verticais

.gy-*classes podem ser usadas para controlar as larguras da medianiz vertical dentro de uma linha quando as colunas se transformam em novas linhas. Como as calhas horizontais, as calhas verticais podem causar algum estouro abaixo .rowdo final de uma página. Se isso ocorrer, você adiciona um wrapper .rowcom a .overflow-hiddenclasse:

Preenchimento de coluna 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>

Calhas horizontais e verticais

.g-*classes podem ser usadas para controlar as larguras de medianiz horizontais, para o exemplo a seguir usamos uma largura de medianiz menor, então não haverá necessidade de adicionar a .overflow-hiddenclasse wrapper.

Preenchimento de coluna 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>

Calhas de colunas de linha

As classes de medianiz também podem ser adicionadas a colunas de linha . No exemplo a seguir, usamos colunas de linha responsivas e classes de medianiz responsivas.

Linha coluna

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>

Sem calhas

As calhas entre colunas em nossas classes de grade predefinidas podem ser removidas com .g-0. Isso remove os margins negativos .rowe a horizontal paddingde todas as colunas filhas imediatas.

Precisa de um design de ponta a ponta? Solte o pai .containerou .container-fluide adicione .mx-0ao .rowpara evitar estouro.

Na prática, veja como fica. Observe que você pode continuar a usar isso com todas as outras classes de grade predefinidas (incluindo larguras de coluna, camadas responsivas, reordenações e muito mais).

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

Troque as calhas

As classes são construídas a partir do $guttersmapa Sass que é herdado 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,
);