我在一行中有两列,并且两列也包含一行。如果页面宽度达到“xs”断点,左列的行会将其列堆叠在一起。
右列的高度大于左列的高度。这会导致左栏底部出现大量空白区域。
我想让左栏在右栏创建的可用空间上展开堆叠的栏。
Bootstrap4 的类 justify-content-between
和 css 属性 justify-content: space-between;
似乎是一个不错的选择,但我不知道如何在这种情况下使用它们。
帮助将不胜感激,谢谢!
fiddle here
和下面的片段:
<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>
最佳答案
您只需将 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>
关于twitter-bootstrap - 垂直对齐折叠 Bootstrap 行上的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46024592/