Bootstrap 3 и другая сетка

Question

Я супер, супер нуб и мне нужна твоя помощь.
Я пытаюсь добиться того, чтобы макет был достаточно гибким в столбце, но все еще в строках, как на рисунке ниже, есть 3 строки, каждыйв другом цвете.Я попробовал 3 строки, а также 1 строку, без разницы.
Хорошо, поэтому я получил 9 столбцов, каждый занимает 4 пробела.И я попытался переместить среднее изображение в зеленом ряду в средний столбец розового.Не сработало, я имею в виду, что сработало, но другие картинки испортились.Я также попробовал .clearfix.
Надеюсь, вы можете помочь, ребята, ура!

Answer 1

вы можете использовать навигационную панель для верхней позиции, но начальная загрузка не предоставляет классов для разбиения столбцов на строки, а позволяет разбивать строки только на столбцы. Здесь вы должны использовать html css и jquery.

Answer 2

То, что вы пытаетесь достичь, называется Masonry Layout.

Вы не можете распределить ваш макет по rows, вы должны сделать это, используя columns.

Все должно бытьвнутри .row div и укажите количество нужных вам столбцов (в вашем случае с изображением вам нужно использовать .col-md-4).

Затем вы должны динамически добавить все в эти три столбца, используя Javascript илитехнология, которую вы используете (вы можете добиться этого также на PHP или т. д., я отредактирую, если вам понадобится помощь в этом).

Кроме того, я рекомендую вам использовать Bootstrap 4, поскольку он содержит новую функциюназывается Cards Columns, которая предназначена для того, чего вы пытаетесь достичь:

https://v4 -alpha.getbootstrap.com / components / card / # card-columns

Answer 3

Bootrstap имеет различные классы для достижения этой цели.

В первую очередь,

<div class="row">

И

<div class="col">

Класс строки определяет строку, а класс col определяетколонка.Вы указываете столбцы col-1, col-2, col-3 в качестве примера, вплоть до col-12.Если вы не определили размер столбца, он автоматически заполнит как можно больше места, вплоть до размера столбца 12.

Существуют тонны вложенных классов, которые также могут изменить поведение, например:размещение текста внутри элементов и т. д.

Эта система строк и столбцов также полностью адаптивна.

Подробнее здесь .

Если вы не можетеДля достижения желаемого результата используйте строки и столбцы начальной загрузки, попробуйте вместо этого использовать flexbox.Подробнее здесь .