Bootstrap 4 中等高的列
[英] Equal height of columns in Bootstrap 4
本文介绍了Bootstrap 4 中等高的列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这个设计中有一点非常规 DIV，如下所示.我可以使用高度并执行此操作，但我希望它动态更改:例如，如果 DIV 有更多内容并且右侧块之一的高度发生变化，则左侧 DIV 也会自动调整其高度.我想知道 flex 是否有帮助.以下是它应该如何更改为:
到目前为止我有这个 HTML:
<div class="row row-eq-height"><div class="col-sm-8 col-8"><div class="black"><p>条形图或折线图</p>
<div class="col-sm-4 col-4"><div class="红色"><p>数字</p>
<div class="紫色"><p>数字</p>
<div class="green"><p>数字</p>
<div class="blue"><p>数字</p>
和 CSS:
p { 颜色:#fff;}.black { 背景颜色:黑色；}.green { 背景颜色:绿色；}.red { 背景色:红色；}.blue { 背景颜色:蓝色；}.purple { 背景色:紫色；}
JSFiddle 演示
解决方案
您可以使用 flexbox 用于此.
更新
另一种方式:
https://jsfiddle.net/persianturtle/ar0m0p3a/5/
.row-eq-height >[类^=列] {显示:弹性；弹性方向:列；}.row-eq-height >[class^=col]:last-of-type div {边距:10px；}.row-eq-height >[class^=col]:last-of-type div:first-of-type {边距顶部:0；}.row-eq-height >[class^=col]:last-of-type div:last-of-type {底边距:0；}.row-eq-height >[class^=col]:first-of-type .black {弹性增长:1；}
更新
更具体的类的更好方法:
https://jsfiddle.net/persianturtle/ar0m0p3a/3/
.row-eq-height >[class^=col]:first-of-type {显示:弹性；}.row-eq-height >[class^=col]:first-of-type .black {弹性增长:1；}.blue p {边距:0；}
原始方式:
https://jsfiddle.net/persianturtle/ar0m0p3a/1/
[class^=col] {显示:弹性；弹性方向:列；}[类^=col] div {弹性增长:1}
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:
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>
and 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
解决方案
You can use flexbox for this.
Update
And another way:
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;
}
Original way:
https://jsfiddle.net/persianturtle/ar0m0p3a/1/
[class^=col] {
display: flex;
flex-direction: column;
}
[class^=col] div {
flex-grow: 1
}
这篇关于Bootstrap 4 中等高的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
