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.
Como eles trabalham
-
Gutters são as lacunas entre o conteúdo da coluna, criadas por horizontal
padding
. Definimospadding-right
epadding-left
em cada coluna e usamos negativomargin
para 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 .container
ou .container-fluid
pode 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
:
<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>
Uma solução alternativa é adicionar um wrapper ao redor do .row
com a .overflow-hidden
classe:
<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>
Calhas verticais
.gy-*
classes podem ser usadas para controlar as larguras da calha vertical. Como as calhas horizontais, as calhas verticais podem causar algum estouro abaixo .row
do final de uma página. Se isso ocorrer, você adiciona um wrapper .row
com a .overflow-hidden
classe:
<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>
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-hidden
classe wrapper.
<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>
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.
<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>
Sem calhas
As calhas entre colunas em nossas classes de grade predefinidas podem ser removidas com .g-0
. Isso remove os margin
s negativos .row
e a horizontal padding
de todas as colunas filhas imediatas.
Precisa de um design de ponta a ponta? Solte o pai .container
ou .container-fluid
.
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).
<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>
Troque as calhas
As classes são construídas a partir do $gutters
mapa Sass que é herdado 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,
);