Como remover o espaço da calha para uma div em bootstrap

O sistema de grade de bootstrap consiste em muitos recipientes, linhas e colunas para alinhamento de layout e conteúdo. O sistema de grade estabeleceu uma linha com 12 colunas virtuais para tornar as páginas da web totalmente responsivas. No entanto, há preenchimento ou espaços ao redor ou entre as colunas. Esses espaços são conhecidos como “Espaços de calha”.

Esta posta.

O que é espaço de calha no bootstrap?

As calhas são os espaços ou lacunas entre as colunas produzidas pelo estofamento horizontal. Eles são usados ​​para suportar o alinhamento e os espaços responsivos no sistema de grade de bootstrap.

Abaixo da imagem, mostra uma linha com uma borda vermelha ao redor. Dentro da linha, existem três elementos de divisão de igualdade de colunas de grade igual. Embora as colunas sejam iguais, ainda existem espaços de calha entre elas:

Como remover o espaço da calha para uma div em bootstrap?

No bootstrap, a classe “sem agasivos”É utilizado para eliminar os espaços de calha de qualquer div.

Para esse fim:

• Adicione um “”Tag junto com a classe“Principal-Div”.
• Em seguida, ajuste uma seção de linha adicionando outro “”Elemento com a classe“linha”. Como precisamos remover os espaços da linha, especifique uma classe “sem agasivos”Dentro dele.
• Para dividir a linha da grade em três colunas iguais, utilize a classe “Col-4”.
• Dentro do contêiner de cada coluna, ajuste os elementos “” com classes “coluna-1","Coluna-2", e "coluna 3”, Respectivamente:

CSS

Na seção CSS, as classes mencionadas na página HTML são estilizadas com várias propriedades de estilo.

Classe de estilo “Main-Div”

.main-div
Largura: 600px;
margem: 50px automático;

O ".Principal-Div”É mencionado para acessar o elemento div ter classe“Principal-Div”. As seguintes propriedades são aplicadas a esta classe:

• ““largura”Define a largura do elemento.
• ““margem”Define o espaçamento ao redor do elemento.

Classe de estilo “Row”

.linha
borda: 1px vermelho sólido;

O bootstrap “linha”A classe é adicionada com a“fronteira" propriedade. Isso envolverá a linha da grade em uma largura, estilo e borda colorida especificados.

As três classes “coluna-1","Coluna-2", e "coluna 3”São atribuídos os CSs“cor de fundo" e "altura”Propriedades para torná -las proeminentes.

Classe de estilo “Coluna-1”

.coluna-1
Background-Color: turquesa;
Altura: 200px;

Estilo “coluna-2” de estilo

.coluna-2
Background-Color: Violet;
Altura: 200px;

Estilo “coluna-3” de estilo

.coluna 3
Coro de fundo: Yellowgreen;
Altura: 200px;

Pode -se observar que o ““Contêiner com a classe“linha”Foi ajustado com sucesso sem espaço de calha entre eles:

Ensinamos a você como remover o espaço da calha para uma div específica no bootstrap.

Conclusão

Para remover espaços de calha para uma div, a classe “sem agasivos" pode ser usado. Para esse fim, adicione o “”Elemento junto com o“Linha sem agitação" aula. Este post forneceu um guia abrangente sobre espaços de calha e como eles podem ser eliminados para uma div específica no bootstrap.