Для получения полного доступа
зарегистрируйтесь

5-колонок на Bootstrap


Данный пример попытка развеять заблуждение: "нельзя на bootstrap сделать сетку с нечетным количеством колонок"

// Откуда пошло название класса 2_4: 12/5 == 2.4, хак но рабочий. (: 
// При желании название могут изменены на более читаемые.
.five-cols-row {
    @five-cols-gutter: @grid-gutter-width; // отступ между колонками по умолчанию 30px, но можно обнулить
     .make-row(@five-cols-gutter); // используем мощь grid-framework.less
    .col-lg-2_4 {    
        .make-lg-column(2.4; @five-cols-gutter); // для lg-устройств
    }
    .col-md-2_4 {
        .make-md-column(2.4; @five-cols-gutter); // для md-устройств
    }
    .col-sm-2_4 {
        .make-sm-column(2.4; @five-cols-gutter); // для sm-устройств
    }
    .col-xs-2_4 {
        .make-xs-column(2.4; @five-cols-gutter); // для xs-устройств
    }
}

// Боллее красивый вариант
.content-row {
    @content-columns: (@grid-columns/5); // 12/5
    @content-gutter: @grid-gutter-width; // отступ между колонками по умолчанию 30px, но можно обнулить
     .make-row(@content-gutter); // используем мощь grid-framework.less
    > .col-content {
        .make-lg-column(@content-columns; @content-gutter); // для lg-устройств
        .make-md-column(@content-columns; @content-gutter); // для md-устройств
        .make-sm-column(@content-columns; @content-gutter); // для sm-устройств
        .make-xs-column(@content-columns; @content-gutter); // для xs-устройств
    }
}

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация