为什么我的bootstrap 4列没有相同的高度? [英] Why aren't my bootstrap 4 columns the same height?

问题描述

我只是在学习引导程序4.这些列应该具有相同的高度，但是这行不通. 代码:

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

(它在一个类容器中).根据文档，它应该自动具有相同的高度.但是，这是我的输出: 屏幕截图

我想念什么?谢谢！

解决方案

列很可能是相同的高度.不是projectDescBox.使用 h-100 类(height:100%)使内部框填充高度.

<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

此外，Bootstrap 4中的col-xs-*已替换为col-*.多层类也是不必要的，因为每一层的宽度都相同.

此:

与以下内容相同: 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屋！