bootstrap列高度_为什么我的bootstrap 4列的高度不一样？

I'm just learning bootstrap 4. The columns are supposed to be the same height, but that's not working out.

Code:

Project

Stuff here

heading

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.

(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.

heading

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.

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)