Esta postagem discutirá o que são espaços de medianiz e como eles podem ser removidos para um div específico no Bootstrap.
O que é Gutter Space no Bootstrap?
As calhas são os espaços ou lacunas entre as colunas produzidas pelo preenchimento horizontal. Eles são usados para dar suporte ao alinhamento de conteúdo responsivo e espaços no sistema de grade Bootstrap.
A imagem abaixo mostra uma linha com uma borda vermelha ao redor. Dentro da linha, existem três elementos div de tamanho igual de colunas de grade iguais. Embora as colunas sejam iguais, ainda há espaços entre elas:
Como remover o espaço da calha para um div específico no Bootstrap?
No Bootstrap, a classe “ sem calhas ” é utilizado para eliminar os espaços de medianiz de qualquer div.
Para este efeito:
- Adicione um “ ” marca junto com a classe “ div principal ”.
- Em seguida, ajuste uma seção de linha adicionando outro “
” elemento com a classe “ fileira ”. Como temos que remover os espaços da linha, especifique uma classe “ sem calhas ”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 as classes “ coluna-1 ”, “ coluna-2 ', e ' coluna-3 ”, respectivamente: < div classe = 'div principal' >
< div classe = 'linha sem sarjetas' >
< div classe = 'col-4' >
< div classe = 'coluna-1' >< / div >
< / div >
< div classe = 'col-4' >
< div classe = 'coluna-2' >< / div >
< / div >
< div classe = 'col-4' >
< div classe = 'coluna-3' >< / div >
< / div >
< / div >
< / div >CSS
Na seção CSS, as classes mencionadas na página HTML são estilizadas com várias propriedades de estilo.
Estilizar a classe “main-div”
.main-div {
largura : 600 pixels;
margem: 50px automático;
}O ' .main-div ” é mencionado para acessar o elemento div com classe “ div principal ”. 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 “linha”
.fileira {
fronteira : 1px vermelho sólido;
}O Bootstrap “ fileira ” é adicionada com a classe “ fronteira ' propriedade. Isso envolverá a linha da grade em uma largura, estilo e borda de cor especificados.
As três classes “ coluna-1 ”, “ coluna-2 ', e ' coluna-3 ” são atribuídos ao CSS “ cor de fundo ' e ' altura ” propriedades para torná-los proeminentes.
Classe de estilo “coluna-1”
.coluna- 1 {
fundo- cor : turquesa;
altura : 200 pixels;
}Classe de estilo “coluna-2”
.coluna- 2 {
fundo- cor : tolet;
altura : 200 pixels;
}Classe de estilo “coluna-3”
.coluna- 3 {
fundo- cor : amarelo verde;
altura : 200 pixels;
}Pode-se observar que o “
” contêiner com a classe “ fileira ” foi ajustado com sucesso sem espaço de medianiz entre eles:
Ensinamos como remover o espaço da medianiz para um div específico no Bootstrap.
Conclusão
Para remover espaços de medianiz para um div específico, a classe “ sem calhas ' pode ser usado. Para isso, adicione o “
” junto com o “ linha sem calhas ' classe. Esta postagem forneceu um guia abrangente sobre espaços de medianiz e como eles podem ser eliminados para um div específico no Bootstrap. - Em seguida, ajuste uma seção de linha adicionando outro “