html - Bootstrap 填充 cols 之间的空白

Question

首先，对不起我的英语。 我正在尝试创建一个包含不同 block 的 html 页面。 但是当一些 block 比另一个高时，它会在高度上留下一个空白。

已经尝试让它们漂浮起来，并且已经在互联网上搜索过但没有成功。

This is my current situation

And this is a example of what I mean

我希望有人能帮助我。 这是我当前的代码

<div class="container">
    <div class="row">
        <div class="col-md-9">
          <div class="darkContainer">
            <h4>Information</h4>
            <small></small>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
        <div class="col-md-3">
          <div class="lightContainer">
            <h4>Information</h4>
            <small></small>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
        <div class="col-md-5">
          <div class="darkContainer">
            <h4>Information</h4>
            <small></small>
            <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="darkContainer">
            <h4>Information</h4>
            <small></small>
            <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </div>
    </div>
  </div>

Answer 1

很遗憾，您还不能解决这个问题(只能使用标准的 Bootstrap CSS)。

也许 Bootstrap 4 会解决这个问题。

无论如何，您可以使用 Javascript 解决它，选择 div.row 中的所有 div，并将较大的子 div 高度设置为所有其他子项。

也许下面的例子会运行:

var divs = $('div.row > div');
var h = 0;
$.each(divs, function(i, item) {
    if ($(item).height() > h) {
        h = $(item).height();
    }
}
$('div.row > div').height(h);