使引导列表看起来像多选

时间:2013-10-25 03:13:43

标签: css twitter-bootstrap

我正在使用Bootstrap 3,我想利用他们愉快的列表格式。但是,我正在尝试创建一个单页网站,并且列表的长度正在严重破坏,因为项目太多而且包含元素向下延伸超过屏幕底部。包含元素约束在总屏幕高度的30%,而不是绝对px。

我真正想要的是一个控件,它像一个<select multiple="true">类型的控件,但具有引导样式。当然,bootstrap建议不要使用select / option标签,因为它们不能很好地采用跨浏览器样式。

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

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

1 个答案:

答案 0 :(得分:0)

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

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