css - 使 Bootstrap 列表看起来像多选

Question

我正在使用 Bootstrap 3，我想利用它们令人愉快的列表格式。但是，我正在尝试创建一个单页站点并且列表的长度严重破坏了事情，因为元素太多并且包含元素向下延伸超过屏幕底部。包含元素被限制在总屏幕高度的 30%，而不是绝对像素。

我真正想要的是一个类似于 <select multiple="true"> 的控件。 -type 控件，但具有 Bootstrap 样式。自然地，bootstrap 建议不要使用 select/option 标签，因为它们不能很好地采用跨浏览器样式。

我试图将列表强制到一定的高度，但总是碰到各种类型的墙。当我第一次尝试使用 SCSS 计算我实际想要的高度(H2 + 三个 <li> 的高度)时，我发现自己无法弄清楚所有 Bootstrap 变量的相关性。当我尝试将父元素设置为 overflow-y:scroll 时，整个元素滚动，我只希望列表部分滚动。最后，仅仅尝试将 Bootstrap 类附加到选择/选项列表是行不通的，这可能是可以预见的。

任何帮助，包括重定向到更好的设计都是有用的。

Answer 1

随着我深入挖掘，问题变得更加清晰。问题实际上是我在错误的元素上设置了明确的高度。我试图在我的列表中设置一个百分比高度，但没有在我的包含 div 上设置它。

一旦我将包含的 div 和列表的高度明确设置为 100%，然后设置 overflow-y:scroll，我就得到了我想要的结果。