这是由于
height: 5rem
和 overflow-auto
类的组合应用于外部 div
元素。 height
属性将元素的高度限制为 5rem,如果内容溢出元素,overflow-auto
属性会创建一个可滚动的容器。在这种情况下,由于内容大于 5rem,因此创建了一个可滚动的容器,但是内容的顶部被隐藏了,因为它在容器的可见区域之外。
要保留 Bootstrap 类,您可以删除
height
属性,然后将 overflow-y
设置为 visible
- 这可以防止创建可滚动容器。 overflow-x
属性保留 auto
以在需要时创建单杠。这种组合可确保在不切断顶部的情况下显示整个内容。
<div class="align-items-center d-flex justify-content-center mb-3 overflow-auto" style="background-color: red; overflow-y: visible;">
<figure class="mb-0" style="background-color: orange">
<div class="d-flex justify-content-center text-center" style="background-color: yellow">
Hickory dickory dock.<br>
The mouse ran up the clock.<br>
The clock struck one,<br>
The mouse ran down,<br>
Hickory dickory dock.
</div>
</figure>
</div>