Bootstrap 4 - Переместить строку вверх Далее

Question

Я просматривал документы Bootstrap, но не могу найти тот класс, который мне нужен для достижения определенного эффекта. Есть ли способ переместить / сместить строку div, если родительская строка имеет столбец, который сдвигает нижний элемент div вниз? Можно ли этого достичь с помощью начальной загрузки? Я приложил изображение того, что я пытаюсь выполнить, вместе с кодом.

<div class="container">
<div class="row">
    <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
    <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
</div>
<div class="row">
    <div class="col-sm-5" style="color: white; background:blue; height: 300px; position: top">something</div>
</div>

Answer 1

Не элегантно, но если вы хотите использовать только CSS, вы можете добавить отрицательный margin-top в точке останова sm. Это позволит использовать одну полную ширину для xs.

Codepen

<div class="container">
    <div class="row">
        <div class="col-sm-5" style="color: white; background:black; height: 100px">Something</div>
        <div class="col-sm-7" style="color: white; background:red; height: 300px">something</div>
    </div>
    <div class="row">
        <div class="col-sm-5 push-up" style="color: white; background:blue; height: 300px;">something</div>
    </div>
</div>

CSS

@media (min-width: 576px) {
    .col-sm-5.push-up {
        margin-top: -200px;
    }
}

Answer 2

Если вы используете bootstrap 4, то решение, которое вы ищете, это, вероятно, компонент Cards. https://getbootstrap.com/docs/4.0/components/card/#card-columns.

** Я бы просто добавил это в комментарии, но мне пока не хватает представителя.

Answer 3

Bootstrap 4 .row - это flexbox, поэтому все col-* будут высотой самого высокого столбца. Поэтому вам нужно float- cols на sm и выше ...

https://www.codeply.com/go/CuWAXOF6Gs

<div class="container">
    <div class="row d-sm-block">
        <div class="col-sm-5 float-left" style="color: white; background:black; height: 100px">something</div>
        <div class="col-sm-7 float-right" style="color: white; background:red; height: 300px">something</div>
        <div class="col-sm-5 float-left" style="color: white; background:blue; height: 300px; position: top">something</div>
    </div>
</div>

• d-sm-block делает строку display:block вместо display:flex на см и выше
• float-left и float-right, чтобы вытянуть более высокий столбец вправо.

Related: Пустое вертикальное пространство между столбцами в Bootstrap 4

Answer 4

Вы можете отсортировать два в один см-5 столбец так:

<div class="container">
  <div class="col-sm-5">
    <div style="color: white; black; height: 300px">something</div>
    <div style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class=col-sm-7">
    <div style="color: white; blue; height: 300px">something</div>
  </div>
</div>

Если вы хотите, чтобы он обнаруживал это автоматически и заполнял все имеющиеся вертикальные пробелы, то нет, это невозможно сделать. Вы должны структурировать ваши cols в соответствии с вашим содержанием.

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

https://getbootstrap.com/docs/4.1/utilities/flex/

<div class="container d-flex">
  <div class="col-sm-5">
    <div style="color: white; black; height: 300px">something</div>
    <div style="color: white; background:red; height: 300px">something</div>
  </div>
  <div class=col-sm-7">
    <div style="color: white; blue; height: 100%">something</div>
  </div>
</div>