Как сделать 5 колонок в Twitter Bootstrap

Достаточно гибкий CSS Framerork Twitter Bootstrap позволяет легко разметить страницы. Сетка из 12 столбцов очень удобна. Но вот как поделить страницу на пять, или кратное пяти число колонок? Тут пришлось значительно поэкспериментировать. Найденное мной решение позволяет внести изменение в количество колонок - вместо 12 сделать 15. В результате принцип создания 5,10,15 колонок сводиться к центрированию относительно друг друга, вложенных ячеек сетки. Реализация этого метода очень простая. Нужно добавить к проекту Bootstrap файл css стилей. Скачать его можно ниже. Листинг не привожу, там 7 сотен строк.

Пример использование: вместо  col-xs-1 использовать col15-xs-1. При этом можно комбинировать новые колонки со старыми. Например так:

<div class="row">
                <div class="col15-md-3 col15-md-offset-0 col-sm-6">
                </div>
                <div class="col15-md-3 col15-md-offset-0 col-sm-6">
                </div>
                <div class="col15-md-3 col15-md-offset-0 col-sm-6">
                </div>
                <div class="col15-md-3 col15-md-offset-0 col-sm-6">
                </div>
                <div class="col15-md-3 col15-md-offset-0 col-sm-6 col-sm-offset-3">
                </div>
</div>
 

Всё! Мы получили 5 колонок.

Прикреплённые файлы
Vovka 09 декабря, 2016

Спасибо. Простое и эфективное решние

Оставить комментарий

Похожие материалы