Настройка Bootstrap 3 для преодоления ограничения в 12 столбцов в строках

Проблема

По умолчанию Bootstrap 3 заставляет столбцы, содержащие более 12 единиц, складываться в стопку вертикально из-за их поведения «float: none». Это ограничение может препятствовать динамическим макетам, в которых в строку можно добавить несколько блоков контента.

Решение

Чтобы обойти это ограничение, вы можете применить пользовательские переопределения CSS, чтобы переопределить поведение Bootstrap и разрешить размещение строк. более 12 столбцов. Вот как:

/* 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;
  }
}

Пример реализации

  

    
col 9
    
col 3
    
col 12
  

Рационализация

Хотя поведение Bootstrap по умолчанию гарантирует, что строки остаются визуально согласованными, оно не всегда подходит для динамических макетов или макетов с ограниченным пространством. Такая настройка обеспечивает большую гибкость и оперативность в таких ситуациях.