为什么我的引导程序 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>

（它位于更上方的类容器中）。根据文档，它应该自动具有相同的高度。但是，这是我的输出： screenshot

我错过了什么？谢谢！

Answer 1

您的列很可能是相同的高度。不是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

另外，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）