提问者:小点点

为什么我的引导4列的高度不一样?


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

(它位于更高的类容器中)。根据文档,它应该自动保持相同的高度。然而,这里是我的输出:屏幕截图

我错过了什么?谢谢


共1个答案

匿名用户

你们的柱子很可能高度相同。不是的是projectDescBox。使用h-100类(高度: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-sm-8 col-md-8 col-lg-8 col-xl-8

与:col-8

当您希望在每一层有不同的宽度时,您只需要拥有多层类(例如:col-8 col-sm-6 col-lg-4 col-xl-3