如何在 Bootstrap 4 中使右列高度独立？答案

【问题标题】：How to make right column height independent in Bootstrap 4?如何在 Bootstrap 4 中使右列高度独立？
【发布时间】：2020-06-29 11:09:07
【问题描述】：

我正在尝试使用 Bootstrap 4 实现以下两列布局：

我的问题是，当我将内容添加到右列时，它会“推”下面的左列，如下所示：

到目前为止，这是我的代码：

<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>

<div class="row">
    <div class="col-md-6">B</div>
</div>

我不知道下一步该怎么做……

【问题讨论】：

相关的，如果不是重复的 - stackoverflow.com/questions/33947885/…

标签： css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

从技术上讲，您应该将标签的“B”部分放在“A”标签内，并用它们自己的“行”和“列”标签包装“A”和“B”。

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col">A</div>
        </div>

        <div class="row">
            <div class="col">B</div>
        </div>

    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Donec at orci porta, suscipit
        felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
        aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
        orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
        eget consequat sem dapibus nec.
    </div>
</div>

【讨论】：

【解决方案2】：

您可以实现您要求的结构，如下所示。您只是在放置行和列时弄错了。

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                A
            </div>
            <div class="col-md-12">
                B
            </div>
        </div>
    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>

【讨论】：