引导行跨度和调整控制自下而上

Question

我试图创建一个使用自举以下。三排在左边，在右边的两排。第一行中的第二列和rowspan的垂直对齐底部。

这里是我试过的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脚本来得到你想要的高度匹配的效果（我不喜欢白手起家均衡器）。

这种同时添加到ROW1-COL1 - 2行，COL1列和ROW1-COL2列 - 注意：为了让代码工作，我不得不使用较小版本的jQuery（2.1.1在这个例子中/你可以测试其他版本看到什么会为你工作），我拖着一些HTML的。如果背景颜色是只为例子那么它的所有设置和柱高度匹配。

看看这个新codepen使用代码：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>