Столбец Bootstrap охватывает 2 строки

Я использую Bootstrap 4, и это то, чего я пытаюсь добиться (картинка стоит тысячи слов): введите здесь описание изображения

Вот чего мне удалось добиться, используя эту разметку:

<div class="col-lg-6">1</div>
<div class="col-lg-6">2</div>
<div class="col-lg-6">3</div> <!-- I want 3 to stick to the bottom of 1 -->

введите здесь описание изображения

Может ли какой-нибудь эксперт по начальной загрузке помочь мне с этим?


bootstrap-4 bootstrap-grid
person yanivps    schedule 23.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы получить что-то похожее на макет, который вы хотите, вам нужно будет использовать вложенные rows и columns, поэтому div 1 и 3 будут в контейнере, который будет использовать 6 столбцов из 12, как это (см. в полноэкранном режиме) :

.col-lg-6 {
	border: 1px solid red;
	min-height: 200px;
}

.col-lg-12 {
	border: 1px solid blue;
	min-height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-6">1</div>
  <div class="col-lg-6">
    <div class="row">
      <div class="col-lg-12">2</div>
      <div class="col-lg-12">3</div>
    </div>
  </div>
</div>

В Bootstrap у вас есть возможность использовать класс order-*, который помогает вам (конечно) упорядочить элементы в flex-контейнере так, как вы хотите, однако это не сработает, поскольку в основном на вашем первом уровне у вас есть только 2 элемента.

Другой вариант, который у вас есть, который на самом деле очень хорошо работает для такого рода двумерных макетов, — это CSS Grid, который является родным для CSS и может помочь вам упорядочить ваши элементы любым способом и позволить вам получить нужный макет:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-template-areas: 
            "g2 g1"
            "g2 g3"
}

.grid-vertical {
  grid-template-columns: 30%;
  grid-template-areas: 
            "g1"
            "g2"
            "g2"
            "g3"
}

.grid-item {
  border: 1px solid #000;
}

.g1 {
  grid-area: g1;
}

.g2 {
  grid-area: g2
}

.g3 {
  grid-area: g3
}
<div class="grid">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

<div class="grid grid-vertical">
  <div class="grid-item g1">1</div>
  <div class="grid-item g2">2</div>
  <div class="grid-item g3">3</div>
</div>

Дополнительную информацию о CSS Grid можно получить здесь. Вы также можете узнать больше об Flexbox (на котором основан Bootstrap 4) здесь, чтобы у вас было больше способов манипулировать компонентами Bootstrap.

person IvanS95    schedule 24.01.2019
comment
Большое спасибо за ответ. Что касается второго примера, у меня есть проблема с поддержкой браузера, поэтому я предпочитаю не использовать. Для первого примера, который использует начальную загрузку (это здорово), есть ли способ поменять местами прямоугольник «1» и прямоугольник «2» для большого просмотра и сохранить их такими, какие они есть, для маленького просмотра? - person yanivps; 24.01.2019
comment
К сожалению, это не так, поскольку технически № 1 и № 2 являются дочерними элементами разных контейнеров, вы не сможете поменять их местами (хотя № 1 и № 3 вы можете поменять местами без проблем), в этот момент, чтобы сохранить используя Bootstrap, я бы сказал, что для этого конкретного типа макета вам лучше просто использовать такие классы, как d-*-none и d-*-block, чтобы скрывать и показывать разделы, когда они вам нужны /: - person IvanS95; 24.01.2019