引导行跨度并自下而上对齐控件

Question

我正在尝试使用引导程序创建以下内容。左边三行，右边两行。第二列的第一行行跨度和垂直对齐底部。

这是我尝试过的html代码

<div class="container-fluid">
<div class="row">
    <div class="col">
        <div style='background-color:red'>
                    row1-col1
        </div> 
        <div style='background-color:aqua'> 
                        row2-col1
        </div> 
    </div> 
    <div class="col" style='vertical-align:bottom'> 
            <div style='background-color:yellow'> 
                  row1-col2
            </div>   
    </div>
</div>
<div class="row">
    <div class="col"> 
        <div style='background-color:lightgreen'> 
                   row3-col1
        </div>
    </div> 
    <div class="col">  
        <div  style='background-color:orange'> 
                 row2-col2
        </div>
    </div>
</div>

这是我得到的实际输出。

不确定我要缺少的内容，感谢您的帮助。预先感谢。

Answer 1

我对您提供的代码进行了一些更改。我移动了一些样式，并向每个列添加了.equal类。

此外，如果您对简单，更可靠的自定义JS脚本感兴趣，以获得所需的高度匹配效果（我不喜欢bootstraps均衡器）。

要将其添加到您的 row1-col1-row2-col1 列和 row1-col2 列中-注意：要使代码正常工作，我必须使用较低版本的jQuery（此示例为2.1.1 /您可以测试其他版本以查看适用于您的版本），然后我重新整理了一些HTML。如果背景颜色仅用于示例，则其所有设置和列高都将匹配。

使用您的代码https://codepen.io/brooksrelyt/pen/xMYZeV

检出此新代笔

.equal {
  background-clip: content-box;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col equal">
        <div style='background-color:red'>
                    row1-col1
        </div> 
        <div style='background-color:aqua'> 
                        row2-col1
        </div> 
    </div> 
    <div class="col equal" style='vertical-align:bottom; background-color:yellow'> 
            <div  style=''> 
                  row1-col2
            </div>   
    </div>
</div>
<div class="row">
    <div class="col"> 
        <div style='background-color:lightgreen'> 
                   row3-col1
        </div>
    </div> 
    <div class="col">  
        <div  style='background-color:orange'> 
                 row2-col2
        </div>
    </div>
</div>