为什么我的bootstrap 4列不是同一个高度？

Question

我只是在学习bootstrap 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>

(它在一个类容器中进一步向上).根据文档,它应该自动高度相同.但是,这是我的输出: 截图

我错过了什么？谢谢!

Answer 1

你的列很可能是相同的高度.这是projectDescBox,这不是.使用h-100class(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

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

这样的: 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)