Bootstrap 4中列的高度相等 [英] Equal height of columns in Bootstrap 4
问题描述
我在此设计中有一些非常规的DIV,如下所示.我可以使用高度并做到这一点,但我希望它可以动态变化: 例如,如果DIV的内容更多,并且右侧块中的一个块的高度发生了变化,则左侧DIV也会自动调整其高度.我想知道flex是否可以帮助您.将其更改为以下方法:
I have a little non-conventional DIV in this design as shown below. I could use a height and do it but I want it to change dynamically: For instance, if the DIV has more content and the height changes in one of the block on the right, the left DIV auto adjust it's height as well. I wonder if flex could help. Here's how it should change to:
到目前为止,我有这个HTML:
I have this HTML so far:
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-8 col-8">
<div class="black">
<p>Bar Graph or Line Graph</p>
</div>
</div>
<div class="col-sm-4 col-4">
<div class="red">
<p>numbers</p>
</div>
<div class="purple">
<p>numbers</p>
</div>
<div class="green">
<p>numbers</p>
</div>
<div class="blue">
<p>numbers</p>
</div>
</div>
</div>
</div>
和CSS:
p { color: #fff; }
.black { background-color: black; }
.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue; }
.purple { background-color: purple; }
JSFiddle Demo
推荐答案
您可以使用 flexbox .
另一种方式:
https://jsfiddle.net/persianturtle/ar0m0p3a/5/
.row-eq-height > [class^=col] {
display: flex;
flex-direction: column;
}
.row-eq-height > [class^=col]:last-of-type div {
margin: 10px;
}
.row-eq-height > [class^=col]:last-of-type div:first-of-type {
margin-top: 0;
}
.row-eq-height > [class^=col]:last-of-type div:last-of-type {
margin-bottom: 0;
}
.row-eq-height > [class^=col]:first-of-type .black {
flex-grow: 1;
}
更新
使用更具体的类的更好方法:
Update
A better way with more specific classes:
https://jsfiddle.net/persianturtle/ar0m0p3a/3/
.row-eq-height > [class^=col]:first-of-type {
display: flex;
}
.row-eq-height > [class^=col]:first-of-type .black {
flex-grow: 1;
}
.blue p {
margin: 0;
}
原始方式:
https://jsfiddle.net/persianturtle/ar0m0p3a/1/
[class^=col] {
display: flex;
flex-direction: column;
}
[class^=col] div {
flex-grow: 1
}
这篇关于Bootstrap 4中列的高度相等的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!