Bootstrap и 5 колонок

14 мая 2016

Bootstrap очень хороший фронтед фрейморк, но у него есть один недостаток, по умолчанию он не умеет делать сетку из 5 колонок. Что бы исправить данный косяк, нужно добавить в less небольшую корректировку.

.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
 
.col-xs-1-5 {
  width: 20%;
  float: left;
}
 
@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 20%;
    float: left;
  }
}
 
@media (min-width: 992px) {
  .col-md-1-5 {
    width: 20%;
    float: left;
  }
}
 
@media (min-width: 1200px) {
  .col-lg-1-5 {
    width: 20%;
    float: left;
  }
}

И можно использовать теги col-lg-1-5. Ну прямо UI Kit какой-то ;)