twitter-bootstrap 如何在 Bootstrap 中创建水平滚动导航?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27390807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a horizontal-scrolling nav in Bootstrap?
提问by Matoe
As can be demonstrated in this fiddle, adding too many elements in a Bootstrap .navcauses it to just add items vertically down. How would I go about limiting its height and making it horizontally scrollable?
正如这个 fiddle所展示的,在 Bootstrap 中添加太多元素.nav会导致它只是垂直向下添加项目。我将如何限制其高度并使其可水平滚动?
回答by DavidG
First you need to tell the ulto not wrap and overflow into a scroll bar. Then the lielements need to not be floated and display inline. This will do it:
首先,您需要告诉ul不要包装和溢出到滚动条中。然后li元素不需要浮动和内联显示。这将做到:
ul.nav {
white-space: nowrap;
overflow-x: auto;
}
ul.nav li {
display: inline-block;
float: none;
}
Fiddle: http://jsfiddle.net/bmfcd3zt/8/

