Проблема с разрывом столбца flexbox после обновления с bootstrap 3 до 4 - PullRequest
Новая
       117

Проблема с разрывом столбца flexbox после обновления с bootstrap 3 до 4

0 голосов
/ 16 июня 2020

Мы обновили наш веб-сайт с bootstrap v3 до v4. Но в нашем портфолио (мозаичная сетка) теперь есть пустое место (тот же код). В то время как в Bootstrap v3 он красиво заполнил все пространство плитками.

Скриншоты:

Неправильно с Bootstrap v4

Раньше это было показано так:

Исправить с помощью bootstrap v3

Примеры кода:

code пример с bootstrap v4: https://jsfiddle.net/82esox3v/

code пример с bootstrap v3: https://jsfiddle.net/s0qa5u2p/

Я пытался целый день, но действительно не могу заставить его работать должным образом. Кто-нибудь знает, как это исправить? Я подозреваю, что нам нужно где-то добавить свойство CSS ..

С уважением,

Bastiaan

1 Ответ

0 голосов
/ 16 июня 2020

Bootstrap код version-3 не будет работать на version-4. Вещи постоянно меняются с более новой версией, особенно с flexbox

. Ваш код включает в себя некоторые css, например @media-query for (992px), который уже имеет класс bootstrap с именем lg

Я улучшил ваш код bootstrap для version-4, который работает так же, как и version-3

больше HTML с меньшим CSS, но все же responsive

СВЯЗЬ JSFIDDLE: https://jsfiddle.net/hrj874sg/1/ 

.blog h4,
.other {
  font-weight: 300;
  margin-top: 0;
  padding-left: 10px;
  padding-top: 32px;
  margin-bottom: 5px;
}

.blog {
  background: orange;
  height: 505px;
}

.other {
  background: lightblue;
  height: 250px;
}
<!-- Bootstrap Version 4.4.1 CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-12">
      <div class="blog">
        <h4>1</h4>
      </div>
    </div>
    <div class="col-lg-6 col-12">
      <div class="row">
        <div class="col-lg-6 col-12 mt-lg-0 mt-2">
          <div class=" other">
            <h4>2</h4>
          </div>
        </div>
        <div class="col-lg-6 col-12">
          <div class=" other">
            <h4>3</h4>
          </div>
        </div>
        <div class="col-lg-6 col-12">
          <div class=" other">
            <h4>4</h4>
          </div>
        </div>
        <div class="col-lg-6 col-12">
          <div class=" other">
            <h4>5</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>6</h4>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>7</h4>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>8</h4>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>9</h4>
      </div>
    </div>
  </div>
</div>
...