我正在尝试使右侧的列与左侧的两个列具有相同的高度。我知道我可以通过将每一边包装成自己的一列来做到这一点，但是随着窗口变小，我想保持它们现在的顺序。如果我将它们放到自己的列中，那么右边的列将移到底部而不是中间。
我浏览了引导文档，但我认为他们没有添加此功能。无论如何，您知道吗？它不必是自举程序，但必须与大多数现代浏览器兼容。
这是一个例子
.container div{
border: 1px solid black;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,quis ultrices lectus magna ut ipsum.</div>
<div class="col-sm-12 col-md-8">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
quis ultrices lectus magna ut ipsum.Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper.
Donec sodales dignissim massa eget commodo. Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis
sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac
laoreet tincidunt, leo tellus venenatis est, quis ultrices lectus magna ut ipsum.</div>
<div class="col-sm-12 col-md-4">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
quis ultrices lectus magna ut ipsum.</div>
</div>
</div>
答案 0 :(得分：3)
对于需要同时进行垂直和水平对齐的情况，可以使用CSS Grid Layout。这使您可以定义2D网格并将元素放置到该网格上。我还没有足够深入地了解Bootstrap 4，以了解它是否具有对网格布局的固有支持，但这是一个小演示。我把它留给您作为练习，让它在小屏幕上也能响应。
.content {
padding: 0.5rem;
margin: 2px;
}
.top {
border: 1px solid red;
}
.middle {
border: 1px solid blue;
}
.bottom {
border: 1px solid green;
}
.row {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr;
}
.middle {
grid-column: 2;
grid-row: 1 / span 2;
}<div class="container">
<div class="row">
<div class="content top">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,quis ultrices lectus magna ut ipsum.</div>
<div class="content middle">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
quis ultrices lectus magna ut ipsum.Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper.
Donec sodales dignissim massa eget commodo. Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis
sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac
laoreet tincidunt, leo tellus venenatis est, quis ultrices lectus magna ut ipsum.</div>
<div class="content bottom">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
quis ultrices lectus magna ut ipsum.</div>
</div>
</div>