Configurando Tamanhos de Colunas Personalizadas no Bootstrap
Resposta Rápida
O sistema de grid do Bootstrap não suporta o uso de valores decimais como col-md-1.5. Se você precisa de uma coluna que tem 12.5% de largura (equivalente a 1.5 colunas padrão), você pode criar uma classe CSS personalizada:
/* Aqui começa o trabalho com classes personalizadas 🙌 */
.col-md-custom { flex: 0 0 12.5%; max-width: 12.5%; }Aplique-a da seguinte forma:
<!-- E aqui aplicamos nossa classe -->
<div class="col-md-custom">Seu conteúdo aqui</div>A classe CSS fornecida ajudará você a imitar a estrutura da grid do Bootstrap e garantir a responsividade do seu layout.
Grids do Bootstrap e Larguras Personalizadas
Para criar col-md-1.5, é importante entender os princípios do sistema de grid do Bootstrap, onde a largura de cada coluna é definida como uma fração de 12. Por exemplo, col-md-1 ocupa 8.33%. Para conseguir uma largura que seja uma vez e meia maior, a largura da coluna deve ser igual a 12.5%.
Configuração Responsiva
Um dos princípios fundamentais do Bootstrap é o design responsivo. Ao criar suas classes personalizadas, preste atenção às propriedades flex de .col-md-custom, para que elas se alinhem bem com os diversos tamanhos de tela, de acordo com os princípios do Bootstrap.
Alinhando Seu Layout
Para garantir a exibição correta do layout, é essencial monitorar o posicionamento adequado das linhas padrão do Bootstrap dentro de um .container ou .container-fluid. Os ajustes nos tamanhos das colunas devem levar em conta o alinhamento, margens e outros pontos de interrupção.
Modelos de Layout Personalizados
Às vezes, pode ser necessário abandonar a grid padrão e criar suas próprias classes responsivas para ter um controle e organização mais precisos do seu layout.
Flex e a Arte da Distribuição de Colunas
Com o advento do flexbox no Bootstrap 4, o controle sobre as propriedades das colunas se tornou uma verdadeira arte. Utilize as propriedades flex, max-width e padding para alcançar os resultados desejados.
CSS Personalizado ou Aninhamento?
Se trabalhar com classes personalizadas parecer complexo, você pode usar linhas aninhadas que formam colunas dentro de colunas, permitindo alcançar a largura desejada de uma maneira amigável ao Bootstrap.
Visualização
Aqui está o porquê de você não poder especificar col-md-1.5 no Bootstrap manualmente:
| Grid do Bootstrap | Seu Pedido |
|---|---|
| col-md-1 | 📏 8.33% |
| col-md-2 | 📏 16.66% |
| col-md-1.5 🚫 | 📏 ??? |
A grid do Bootstrap é construída usando números inteiros, sem permitir valores em meio período.
📏 [1 | 2 | 3 | 4 | .. ] 👷 Grid
🛠️ Seu desejo: 1.5? Não é possível.
Assim, recorremos à personalização além das classes CSS padrão.
Guia Rápido para Criar Colunas Personalizadas
Como criar col-md-1.5:
/* Por que ser comum quando você pode ser único em ~12.5%? */
.custom-col-md-1-5 {
flex: 0 0 12.5%;
max-width: 12.5%;
}Depois, insira isso em seu HTML:
<div class="row">
<!-- Agora esta coluna ocupará 1.5 unidades! -->
<div class="custom-col-md-1-5">...</div>
<!-- Outras colunas são colocadas aqui -->
</div>E sua col-md-1.5 está pronta!
Dicas para Evitar Problemas de Layout
Ao utilizar larguras personalizadas, tente evitar overflow e possíveis problemas de alinhamento. Uma linha fina separa um layout bem projetado do caos. Testar em diversos dispositivos ajudará a manter a ordem e clareza do seu design.
Dicas Valiosas da Comunidade e Conjunto de Ferramentas
Códigos compartilhados pela comunidade podem ser sua salvação das complexidades do design de layout. Explore extensões do Bootstrap e outros recursos para descobrir novas maneiras de implementar suas ideias de design.
Recursos Úteis
- Sistema de Grid · Bootstrap v5.0 — Tudo sobre os recursos do sistema de grid padrão do Bootstrap.
- Tutorial | DigitalOcean — Um guia abrangente para criar seu próprio sistema de grid totalmente compatível com o Bootstrap.
- 5 Dicas Simples para Criar Layouts Responsivos Facilmente - YouTube — Um tutorial em vídeo que ajuda a evitar erros comuns ao projetar grids responsivos.
- Aguarde um momento... — Uma discussão animada sobre tamanhos de colunas personalizadas no Stack Overflow.
- Medium — Um guia informativo sobre o sistema de grid do Bootstrap que ajudará você a navegar melhor por ele.