Получите кладку как макет с Bootstrap 4 - PullRequest
Новая
       42

Получите кладку как макет с Bootstrap 4

0 голосов
/ 17 сентября 2018

Я хочу создать следующий макет (см. Img):

masonry (?) layout

Главное:

  • блоки «сливаются» вместе, как в макете кладки, без полей ниже
  • Один блок удваивается с другими (или более блоков такого типа)

Я попробовал это в2 способа:

  • С опцией Cards для начальной загрузки, но я не могу заставить ее работать, так как один столбец в два раза больше других, а также удаляет поле.
  • Помещение двух изображений в 1 столбец, но проблема в том, что порядок будет испорчен, если вы сделаете его отзывчивым.

У кого-нибудь есть опыт, чтобы заставить что-то подобное работать?

1 Ответ

0 голосов
/ 19 сентября 2018

Так я структурировал сетку BootStrap, чтобы получить макет, подобный вашему.

HTML 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Grid test</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="grid.css" rel="stylesheet">
    </head>
    <body>
        <div class="container-fluid">
            <h1>Grid test</h1>
        </div>
        <div class="row">
            <div class="col">COL1</div>
            <div class="col">COL2</div>
            <div class="col">COL3</div>
            <div class="col">COL4</div>
        </div>
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col">COLa</div>
                    <div class="col">COLb</div>
                </div>
                <div class="row">
                    <div class="col">COLc</div>
                    <div class="col">COLd</div>
                </div>
            </div>
            <div class="col">COL+</div>
        </div>
    </body>
</html>

CSS 

body {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h3 {
  margin-top: 2rem;
}

.row {
  margin-bottom: 1rem;
}
.row .row {
  margin-top: 1rem;
  margin-bottom: 0;
}
[class*="col"] {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

Теперь вам нужно изменитьПоля CSS, цвета, выравнивание, ...

  • Я использовал bootstrap v4.1 Я только что скачал
  • Это основано на примере начальной загрузки http://getbootstrap.com/docs/4.1/examples/grid/
  • Размещенный здесь grid.css основан на этом же сайте.
  • Я пробовал его в Chrome и могу изменить размер окна от минимально возможной ширины до самой большой.

РЕДАКТИРОВАТЬ Вот снимки экрана результата:

Полная ширина: enter image description here

Отзывчивый, как только он начинает складывать div:

enter image description here

В итоге вы получаете этот заказ, сверху вниз:

  • col1
  • col2
  • col3
  • col4
  • cola
  • colb
  • colc
  • cold
  • col +
...