bootstrap中div超出范围显示滚动条

在Bootstrap中，若要使一个div容器在内容超出其设定的宽度或高度时自动显示滚动条，你可以直接使用CSS的overflow属性。Bootstrap本身并不直接提供特定的类来控制滚动条的显示，但你可以很容易地通过内联样式或自定义CSS类来实现这一效果。

这里有两种常见的overflow属性值来实现你的需求：

1. overflow: auto;：当内容超出容器时，滚动条自动出现。如果内容没有超出容器边界，则滚动条不显示。
2. overflow: scroll;：无论内容是否超出容器，滚动条始终可见。

示例代码

使用内联样式

<div class="my-scrollable-div" style="overflow-y: auto; /* 或者使用 overflow: auto; 实现水平和垂直滚动条 */ 
                                   height: 200px; /* 设置一个固定高度或宽度，根据需要调整 */}
    <!-- 这里放置你的内容 -->
</div>

使用自定义CSS类

/* 在你的CSS文件中 */
.my-scrollable-div {
    overflow-y: auto; /* 或者 overflow: auto; 控制水平和垂直滚动条 */
    height: 200px; /* 或者 width、max-height 等，根据需要设置 */
}

<div class="my-scrollable-div">
    <!-- 这里放置你的内容 -->
</div>

确保你为需要滚动的div设置了固定的宽度或高度，否则滚动条可能不会按预期工作，因为浏览器不知道何时内容会超出容器的大小。如果希望滚动条始终保持可见（即使内容未超出容器），则应使用overflow: scroll;。

Was this helpful?

YesNo

0 / 0