Как сделать 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

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

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

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