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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:59:12  来源:igfitidea点击:

How to create a horizontal-scrolling nav in Bootstrap?

htmlcsstwitter-bootstraptwitter-bootstrap-3

提问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/

小提琴:http: //jsfiddle.net/bmfcd3zt/8/

回答by Benjamin J. Benoudis

First, here is a fiddlethat I've found on a scrolling implementation of tabs.

首先,这是我在选项卡的滚动实现中找到的一个小提琴

Second, I don't think that it's a good UXto provide so many links in a tabbar. I recommend you to use dropdown menus or mega menu.

其次,我认为在标签栏中提供这么多链接并不是一个好的用户体验。我建议您使用下拉菜单或超级菜单