Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Bootstrap 3 сетка: Сетка. Основы bootstrap 3 для начинающих. Урок №4

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Блог / Танцы с CSS / bootstrap / Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, то никаких проблем с переносами нет.

В HTML это выглядит так:

<div> <div>Ячейка 1</div> <div>Ячейка 2</div> <div>Ячейка 3</div> <div>Ячейка 4</div> <div>Ячейка 5</div> <div>Ячейка 6</div> <div>Ячейка 7</div> <div>Ячейка 8</div> </div>

1

2

3

4

5

6

7

8

9

10

<div>

  <div>Ячейка 1</div>

  <div>Ячейка 2</div>

  <div>Ячейка 3</div>

  <div>Ячейка 4</div>

  <div>Ячейка 5</div>

  <div>Ячейка 6</div>

  <div>Ячейка 7</div>

  <div>Ячейка 8</div>

</div>

Но стоит нам увеличить высоту одной из ячеек, как верстка тут же ломается:

<div> <div>Ячейка 1</div> <!— ячейка не стандартной высоты —> <div>Ячейка 2</div> <div>Ячейка 3</div> <div>Ячейка 4</div> <div>Ячейка 5</div> <div>Ячейка 6</div> <div>Ячейка 7</div> <div>Ячейка 8</div> </div>

1

2

3

4

5

6

7

8

9

10

11

<div>

  <div>Ячейка 1</div>

  <!— ячейка не стандартной высоты —>

  <div>Ячейка 2</div>

  <div>Ячейка 3</div>

  <div>Ячейка 4</div>

  <div>Ячейка 5</div>

  <div>Ячейка 6</div>

  <div>Ячейка 7</div>

  <div>Ячейка 8</div>

</div>

Способ № 1

Первым очевидным решением является переход на 4ю версию, где верстка построена на CSS flex. Для старых проектов это всегда сделать не просто, так как придется тестировать всю верстку.

Способ № 2

Проблема известна, и разработчики фреймворка предлагают добавить в верстку .clearfix контейнеры. Это подходит для решения ряда проблем, но не при выводе списков (например списка товаров), когда число элементов заранее не известно.

<div> <div>Ячейка 1</div> <div>Ячейка 2</div> <div>Ячейка 3</div> <div>Ячейка 4</div> <!— мы знаем где нужно разбить строку —> <div></div> <div>Ячейка 5</div> <div>Ячейка 6</div> <div>Ячейка 7</div> <div>Ячейка 8</div> </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div>

  <div>Ячейка 1</div>

  <div>Ячейка 2</div>

  <div>Ячейка 3</div>

  <div>Ячейка 4</div>

 

  <!— мы знаем где нужно разбить строку —>

  <div></div>  

 

  <div>Ячейка 5</div>

  <div>Ячейка 6</div>

  <div>Ячейка 7</div>

  <div>Ячейка 8</div>

</div>

Фикс позволит вам получить следующую сетку контейнеров:

Чтобы это применить к разным сеткам (не только xs) придется вставлять контейнеры в соответствующие места списка. Но этот метод работает для старых браузеров, которые не поддерживают CSS flex.

Способ № 3

Этот способ возвращает нас к 1му методу, т.е. мы будем использовать стили flex, чтобы пофиксить сетку bootstrap 3.x.

Поправим стиль контейнера .row следующим образом:

<div> <div>Ячейка 1</div> <div>Ячейка 2</div> <div>Ячейка 3</div> <div>Ячейка 4</div> <div>Ячейка 5</div> <div>Ячейка 6</div> <div>Ячейка 7</div> <div>Ячейка 8</div> </div>

1

2

3

4

5

6

7

8

9

10

11

<div>

  <div>Ячейка 1</div>

  <div>Ячейка 2</div>

  <div>Ячейка 3</div>

  <div>Ячейка 4</div>

 

  <div>Ячейка 5</div>

  <div>Ячейка 6</div>

  <div>Ячейка 7</div>

  <div>Ячейка 8</div>

</div>

Данный фикс исправит сетку вот так:

Результат отличается от того, что мы получаем при добавлении контейнера . clearfix. А также можно забыть о работе в старых браузерах. Но данный способ избавляет нас править шаблоны, фаршируя их лишними контейнерами.

Оформим правки в виде CSS класса:

.grid-fix { display: flex; flex-wrap: wrap; }

.grid-fix {

  display: flex;

  flex-wrap: wrap;

}

Осталось добавить класс к нужные нам контейнера .row.

bootstrap

Написать комментарий

Данная запись опубликована в 02.05.2021 18:49 и размещена в Танцы с CSS. Вы можете перейти в конец страницы и оставить ваш комментарий.

 

Комментарии к «Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)»

Понравилась статья? Есть вопросы? — пишите в комментариях.

Модульные сетки | WebReference

Bootstrap характерен своей продуманной и гибкой системой модульных сеток, в основе которой лежит 12-колоночный макет.

Колонки одинаковой ширины

Сами колонки не обязательно должны иметь одинаковую ширину, можно комбинировать любое число колонок, главное, чтобы они в сумме давали 12.

Колонки разной ширины

Создание колонок

Так, чтобы создать макет из трёх колонок используем <div> с классом container, внутри которого будут располагаться наши колонки. Сами колонки находятся внутри <div> с классом row и содержат имена вида col-xs-N, где N — число колонок от 1 до 12 (пример 1).

Пример 1. Макет с тремя колонками

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Трёхколоночный макет</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
   [class*="col-"] {
    background-color: #eee;
    border-right: 2px solid #fff;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 2rem;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
    <div>3 колонки</div>
    <div>7 колонок</div>
    <div>2 колонки</div>
   </div>
  </div>
  <script src="js/jquery.
 
 
 min.js"></script>
  <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Стиль добавлен лишь для наглядного выделения колонок.

Класс container создаёт макет фиксированной ширины, значение которой зависит от размера устройства. Для мониторов максимальная ширина составляет 1170 пикселей, для смартфонов макет будет занимать всю доступную ширину. Если вам не требуется ограничивать ширину макета, то вместо класса container следует использовать container-fluid (пример 2).

Пример 2. Резиновый макет

<div>
 <div>
  <div>4 колонки</div>
  <div>6 колонок</div>
  <div>2 колонки</div>
 </div>
</div>

Отступы между колонок

Колонки изначально плотно прилегают друг к другу, что не всегда полезно для макета. Для добавления пустого пространства между колонками предназначен класс col-xs-offset-N, где N изменяется от 0 до 12. Отступ добавляется слева от текущей колонки (пример 3).

Пример 3. Добавление отступов

<div>
 <div>
  <div>3 колонки</div>
  <div>5 колонок</div>
  <div>2 колонки</div>
 </div>
</div>

Результат данного примера в браузере показан на рис. 3.

Рис. 3. Колонки с отступами между ними

Помните, что отступы добавляются к общему числу колонок, сумма которых не должна превышать 12, в противном случае колонки начнут перемещаться на другую строку.

Сдвиг колонок

Каждую колонку можно сдвигать влево или вправо на указанное число колонок. Опять же это делается с помощью классов. col-xs-pull-N — сдвигает колонку влево на заданное число, а col-xs-push-N сдвигает вправо (пример 4). Здесь N может меняться от 0 до 12.

Пример 4. Сдвиг колонок вправо

<div>
 <div>
  <div>3 колонки</div>
  <div>5 колонок</div>
  <div>2 колонки</div>
 </div>
</div>

Заметьте, что сдвиг это не дополнительная колонка как при использовании offset, так что суммировать все значения не нужно.

Ещё надо следить за тем, чтобы колонки не накладывались друг на друга.

Вложенные колонки

При вёрстке сложных макетов двенадцати колонок может не хватить, к тому же в одной колонке могут встречаться ещё дополнительные. Так что нам потребуются вложения одних колонок в другие. Делается это похожим образом (пример 5).

Пример 5. Вложенные колонки

<div>
 <div>
  <div>Заголовок</div>
  <div>
   <div>
    <div>Колонка 1</div>
    <div>Колонка 1-1</div>
    <div>Колонка 1-2</div>
   </div>
  </div>
  <div>Колонка 2</div>
 </div>
</div>

Чтобы создать вложенные колонки опять добавляем <div> с классом row, который содержит желаемую структуру вложенных колонок. Таким образом можно сверстать какие угодно сложные макеты.

Заметьте, что заголовок заполняет всю ширину макета, потому что он занимает все 12 колонок. Дополнительный контейнер row для подобных вещей вводить не обязательно, перенос остальных колонок на другую строку произойдет автоматически (рис.

 4).

Рис. 4. Вложенные колонки

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Bootstrap 3 Grid System