gpt4 book ai didi

twitter-bootstrap - Bootstrap 4 中列的高度相等

转载 作者:技术小花猫 更新时间:2023-10-29 10:59:55 28 4
gpt4 key购买 nike

我在这个设计中有一个非常规的 DIV,如下所示。我可以使用一个高度来做,但我希望它动态变化: enter image description here例如,如果 DIV 包含更多内容并且右侧 block 之一的高度发生变化,则左侧 DIV 也会自动调整其高度。我想知道 flex 是否可以提供帮助。以下是它应该如何更改为: enter image description here

到目前为止我有这个 HTML:

<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

最佳答案

您使用的是 Bootstrap 4,对吗? Bootstrap 4 默认实现了 flexbox,你可以很容易地解决这个问题,同时使用 Bootstrap 4 提供的纯类:

<div class="container">
<div class="row">
<div class="col-sm-8 col-8 black">
<p>Bar Graph or Line Graph</p>
</div>
<div class="col-sm-4 col-4 d-flex align-content-around flex-wrap">
<div class="red">
<p>numbers and more and so on and on and on</p>
</div>
<div class="purple">
<p>numbers</p>
</div>
<div class="green">
<p>numbers</p>
</div>
<div class="blue">
<p class="mb-0">numbers</p>
</div>
</div>
</div>
</div>

JS Fiddle 链接:https://jsfiddle.net/ydjds2ko/

详细信息:

  • 您不需要类(class) row-eq-height (它不在 Bootstrap4 中无论如何)因为默认为等高。

  • 类中的第一个 div col-sm-8有合适的高度,它只是在黑色背景下不可见,因为内部 div 有它自己的高度。我刚刚删除了内部 div 并添加了类 black上校如果你需要内部 div,给它 (Bootstrap4) 类 h-100调整父元素的高度。

  • 类 col-sm-4 的 div 是类 d-flex align-content-around flex-wrap。他们正在对齐内容 div。 Bootstrap 独库:https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

    • 使用 w-100 将此容器内的 div 的宽度设置为父级的宽度
  • 因为 <p>在底部添加一个边距,你的蓝色 divends 没有关闭与黑色 div 齐平。我加了类“mb-0”,它将底部边距设置为“0”,因此您可以看到它有效。

如果右边或左边的 div 具有更大的高度属性,那应该可以工作。

编辑:添加了内容对齐类。

关于twitter-bootstrap - Bootstrap 4 中列的高度相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46611092/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com