为什么我的 bootstrap 4 列的高度不同? [英] Why aren't my bootstrap 4 columns the same height?
问题描述
我只是在学习引导程序 4.列应该是相同的高度,但这行不通.代码:
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><div class="projectDescBox"><h5>项目</h5><p>这里的东西</p>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><div class="projectDescBox"><h5>标题</h5><p>这里有很多更长的东西.这个盒子应该更长.这里的东西要长很多.这个盒子应该更长.这里的东西要长很多.这个盒子应该长很多.</p>
(它位于更上方的类容器中).根据文档,它应该自动具有相同的高度.但是,这是我的输出:截图
我错过了什么?谢谢!
您的列很可能具有相同的高度.projectDescBox
不是.使用 h-100
类 (height:100%
) 使内框填充高度.
<h5>标题</h5><p>这里有很多更长的东西.这个盒子应该更长.这里的东西要长很多.这个盒子应该更长.这里的东西要长很多.这个盒子应该长很多.</p>
https://www.codeply.com/go/d8lGpPzUOy
此外,col-xs-*
在 Bootstrap 4 中被替换为 col-*
.多层类也是不必要的,因为在每一层.
这个: col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8
,
等同于: col-8
当您希望每一层具有不同的宽度时,您只需要拥有多层类(例如:col-8 col-sm-6 col-lg-4 col-xl-3
)
I'm just learning bootstrap 4. The columns are supposed to be the same height, but that's not working out. Code:
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
<div class="projectDescBox">
<h5>Project</h5>
<p>Stuff here</p>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="projectDescBox">
<h5>heading</h5>
<p>a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.</p>
</div>
</div>
(it's in a class container further up). According to the documentation, it should be automatically the same height. However, here is my output: screenshot
What am I missing? Thanks!
You're columns are most likely the same height. It's the projectDescBox
that's not. Use the h-100
class (height:100%
) to make the inner boxes fill the height.
<div class="projectDescBox h-100">
<h5>heading</h5>
<p>a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.a lot longer stuff here. This box should be a lot longer.</p>
</div>
https://www.codeply.com/go/d8lGpPzUOy
Also, col-xs-*
has been replaced with col-*
in Bootstrap 4. The multi-tier classes are also unnecessary since there all the same width at each tier.
this: col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8
,
is the same as: col-8
You only need to have multi-tier classes when you want different widths at each tier (eg: col-8 col-sm-6 col-lg-4 col-xl-3
)
这篇关于为什么我的 bootstrap 4 列的高度不同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!