5 колонок в Twitter Bootstrap

Эта тема не имеет прямого отношения к MODx, но может пригодится тем кто использует Theme.Bootstrap.
В последнем проекте понадобилось вывести контент в 5 колонок, при этом сохранить полную работоспособность Twitter Bootstrap 3. Найти с ходу решение в сети не получилось и я сам нашёл довольно интересное решение. Для тех кому интересно решение — прошу под кат.

По сути всё решение один css-файл, который нужно подключить дополнительно к стилям bootstrap:
http://yadi.sk/d/Wmrk5ji5P7SEE
А дальше в нужном месте нужно вместо 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>
Павел Пустота
05 мая 2014, 12:50
modx.pro
3
9 289
+1

Комментарии: 15

Илья Уткин
05 мая 2014, 17:57
+2
А что на github-то не выложишь? Хочется посмотреть, а скачивать себе не хочется) Да и найти потом проще будет, когда понадобится.
    Павел Пустота
    05 мая 2014, 20:48
    0
    Замечание принято. Постараюсь быстренько исправиться)
    Alex Vakhitov
    06 мая 2014, 05:25
    0
    А не проще ли это было встроенными средствами TB сделать? Там как бы это все переменными в less файлах можно задать и все будет работать полностью на стандартном коде и без всяких костыльных файлов
      Павел Пустота
      06 мая 2014, 09:40
      0
      Сразу 12ти и 15ти колоночный макет будет работать?
      Хотя при любом раскладе лично мне было бы очень интересно посмотреть на работу less с использованием ТВ.
        Alex Vakhitov
        06 мая 2014, 15:14
        0
        Через less можно исправить и подвести к нужному виду 90% TB, на мой взгляд это единственно верный путь работы с ним, чтобы не плодить тонны лишнего кода и всякие important. По поводу сеток всегда можно найти нужную и универсальную, теже 20 колонок дают и 5 и 2 и 4 одинаковых, а при использовании offset будет 3 колонки, учитывая более мелкий размер самой колонки в 1 будет все корректно и нормально отображаться
          Павел Пустота
          06 мая 2014, 15:18
          0
          Извиняюсь, не сразу понял, что TB — это Twitter Bootstrap.
          Я сначала подумал, что имеются в виду ТВ (template variables) MODx =))
      Виталий Киреев
      06 мая 2014, 05:44
      0
      getbootstrap.com/customize/ Поменять @grid-columns на 15 и все.
        Павел Пустота
        06 мая 2014, 09:37
        +1
        Если просто сгенерировать 15-ти колоночный макет мы потеряем 12-ти колоночный, а он необходим, чтобы страницу, например, делить пополам: col-md-6 и col-md-6
        По сути с этого я и начал.
      Евгений Webinmd
      06 мая 2014, 22:05
      0
      я бы бил по рукам дизайнера рисующего по смешанной сетке.
        Павел Пустота
        06 мая 2014, 22:08
        0
        Представь себе компанию у которой 5 товаров и идеальным вариантом их представления является 5-ти колоночная сетка, чтобы можно было сравнить характеристики.
        Причём здесь дизайнер?!
          Евгений Webinmd
          06 мая 2014, 22:13
          0
          Так раз где-то необходимо разделить пополам, а где-то разделить на 5, то нужно и сетку подобрать нужную. Но если вас устраивает играться с версткой, то да, выгораживайте дизайнера. нафиг сетку))
        Сергей
        08 декабря 2017, 13:21
        0
        Автор что за ацкий код с классами? просто добавь новые классы в css вот хорошая инструкция для бутстрапа 3 и 4 версий
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          15