Кожен верстальник, який використовує Twitter Bootstrap для адаптивної верстки, стикається з питанням – як же зробити сітку з 5 колонок. Ми знаємо, що Bootstrap використовує 12-ти колонкову сітку. Вона ділиться на 2,3,4 блоки в одному рядку. Але як бути, якщо нам потрібно 5 блоків? Ось приклад верстки, коли у мене виникло таке питання. Дивіться скрін, потрібно було розмістити 5 блоків в одному рядку.
І на це є відповідь, потрібно зробити всього два кроки.
1. Додаємо стилі
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.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; } } |
2. Структуру 5-колонкової сітки Bootstrap робимо в такому вигляді:
|
1 2 3 4 5 6 7 |
<div class="row"> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="шлях_до_зображення" alt="1" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="шлях_до_зображення" alt="2" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="шлях_до_зображення" alt="3" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="шлях_до_зображення" alt="4" /></div> <div class="col-xs-6 col-sm-1-5 col-md-1-5 col-lg-1-5"><img src="шлях_до_зображення" alt="5" /></div> </div> |
Сітка з 5 колонок у Twitter Bootstrap готова. Тепер ви можете робити 5 колонок у будь-якому місці на сайті. Насолоджуйтеся результатом. Якщо у вас є питання, задавайте їх у коментарях.
Биг сенк!