Question

起初，对不起我的英语。我正在尝试使用不同的块创建一个html页面。但是当一些块比较高时，另一块则在高度上留下一个空白区域。

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

我希望有人可以帮助我。这是我目前的代码

<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);

Answer 2

您可以在CSS中使用top和left或right和bottom。这允许您将元素放置在页面的任何位置。

Answer 3

问题是您没有正确划分引导列。您必须将其除以col-9和col-3，然后将所有内容放在列中。下面的代码可能适合您

<div class="container">
<div class="row">
    <div class="col-md-12">

    <div class="col-md-9">

      <div class="darkContainer col-md-12">
        <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 class="col-md-7">
      <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-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> <!-- col-9 -->

    <div class="col-md-3">
      <div class="lightContainer col-md-12">
        <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> <!-- col-12-->
</div>

这是演示 DEMO

祝你好运！

colst

3 个答案: