Bootstrap 5 溢出自动类切断可滚动内容的顶部

问题描述 投票:0回答:1
html css twitter-bootstrap bootstrap-5
1个回答
0
投票

这是由于

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>
© www.soinside.com 2019 - 2024. All rights reserved.