从 bootstrap 3 升级到 4 后 flexbox 分栏出现问题

Question

我们已将我们的网站从 bootstrap v3 更新到 v4。但是我们的投资组合（瓷砖网格）现在里面有空 space（相同的代码）。在 Bootstrap v3 中，它用瓷砖很好地填满了所有 space。

截图：

Incorrect with Bootstrap v4

之前是这样显示的：

Correct with bootstrap v3

代码示例：

code bootstrap v4 示例： https://jsfiddle.net/82esox3v/

code bootstrap v3 示例： https://jsfiddle.net/s0qa5u2p/

我已经尝试了一整天，但我真的无法让它正常工作。有人知道如何解决这个问题吗？我怀疑我们需要在某处添加 CSS 属性..

亲切的问候，

巴斯蒂安

Answer 1

Bootstrap version-3 的代码不适用于 version-4。随着新版本的不断变化，尤其是 flexbox

您的代码包含一些 css，例如 @media-query for (992px)，其中已经包含 bootstrap class，命名为 lg

我改进了 version-4 的 bootstrap 代码，它的工作方式与 version-3

的工作方式类似

更多 HTML 更少 CSS 但仍然 responsive

JSFIDDLE LINK：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>

从 bootstrap 3 升级到 4 后 flexbox 分栏出现问题

Problem with flexbox column breaking after upgrading from bootstrap 3 to 4

twitter-bootstrap

grid

upgrade

break

tile