Question

我连续有两列，两列也包含一行。如果页面宽度达到了＆＃39; xs＆＃39;那么左列的列将它们列在彼此的顶部。突破点。

右栏的高度大于左栏的高度。这导致左栏底部有很多空的空间。

我希望左列在右列创建的可用空间上展开堆叠列。

Bootstrap4的类justify-content-between和css属性justify-content: space-between;似乎是一个不错的选择，但我不知道如何在这种情况下使用它们。

非常感谢帮助，谢谢！

小提琴here和下面的代码段：

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <!-- left column -->
    <div class="col-6">
      <div class="row">
        <div class="col-12 col-md-4">column 1</div>
        <div class="col-12 col-md-4">column 2</div>
        <div class="col-12 col-md-4">column 3</div>
      </div>
    </div>

    <!-- right column -->
    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <p>
            imagine this col was really tall, and I wish the columns one, two, and three from the left col would justify between themselves to match the overall height of this column
          </p>
        </div>
      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 1

您只需将h-100类添加到第一列中的row元素即可 - 请参阅下面的演示：

.container > .row > .col-6 > .row > div {
  border: 1px solid #ddd; /* border for illustration */
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <!-- left column -->
    <div class="col-6">
      <div class="row h-100"> <!-- <= added h-100 class here -->
        <div class="col-12 col-md-4">column 1</div>
        <div class="col-12 col-md-4">column 2</div>
        <div class="col-12 col-md-4">column 3</div>
      </div>
    </div>

    <!-- right column -->
    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <p>
            imagine this col was really tall, and I wish the columns one, two, and three from the left col would justify between themselves to match the overall height of this column
          </p>
        </div>
      </div>
    </div>

  </div>
</div>

在折叠的引导行上垂直对齐内容

1 个答案: