css - Bootstrap 3 面板移动滚动/响应

Question

这是我的问题:我正在尝试实现一个包含用户列表的 bootstrap 3 面板。此列表位于另一个 bootstrap 3 面板内。 看这里: https://jsfiddle.net/gwnyyvaa/

ok some apparently some code is needed here

现在的问题是在手机上，它不允许滚动。我希望它允许滚动，因为移动屏幕太小，无法在一页上显示它。

谢谢!

Answer 1

如果面板中显示的文本过多，Bootstrap 不会自动使面板滚动。所以你应该添加一些 CSS 来自己做。这是您需要添加的 CSS:

.users_list .panel-body {
    overflow-x: auto;
}

如果文本溢出容器，这将导致 .user_list 的 .panel-body 水平滚动。

这是添加了上述 CSS 的 fiddle : https://jsfiddle.net/89cpmctt/1/

如果您希望它垂直滚动，则必须为面板指定一个高度。这是因为 div 会垂直扩展以适应内容。所以你需要给.panel-body添加一个height属性。连同 overflow-y:auto。这是一个例子

.panel-body {
    height: 500px;
    overflow-y: auto;
}