从引导程序3升级到4后，flexbox列损坏的问题

Question

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

屏幕截图：

Incorrect with Bootstrap v4

虽然像这样显示之前：

Correct with bootstrap v3

代码示例：

code引导程序v4的示例：https://jsfiddle.net/82esox3v/

code引导程序v3的示例：https://jsfiddle.net/s0qa5u2p/

我一整天都在尝试，但实际上我无法正常工作。有人知道如何解决此问题吗？我怀疑我们需要在某处添加CSS属性。.

亲切的问候，

Bastiaan

Answer 1

version-3的引导代码无法在version-4上使用。事情随着新版本而不断变化，尤其是flexbox

您的代码包括css之类的@media-query for (992px)，它已经带有名为lg的引导程序类，>

我已经改善了bootstrap的version-4代码，该代码的工作方式与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>