Personalizando o Bootstrap 3 para quebrar o limite de 12 colunas em linhas

Problema

Por padrão, o Bootstrap 3 força o empilhamento de colunas com mais de 12 unidades verticalmente devido ao seu comportamento "float: none". Essa limitação pode prejudicar layouts dinâmicos onde vários blocos de conteúdo podem ser adicionados a uma linha.

Solução

Para quebrar essa restrição, você pode aplicar substituições CSS personalizadas para substituir o comportamento do Bootstrap e permitir que as linhas sejam acomodadas mais de 12 colunas. Veja como:

/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}

Exemplo de implementação

  

    
col 9
    
col 3
    
col 12
  

Racionalização

Embora o comportamento padrão do Bootstrap garanta que as linhas permaneçam visualmente consistentes, ele pode nem sempre ser adequado para layouts dinâmicos ou com restrição de espaço. Essa personalização permite maior flexibilidade e capacidade de resposta em tais situações.