如何在Bootstrap中创建水平滚动导航？

Question

正如在this fiddle中可以证明的那样，在Bootstrap .nav中添加太多元素会导致它只是垂直向下添加项目。我如何限制其高度并使其可水平滚动？

Answer 1

首先，您需要告诉ul不要换行并溢出到滚动条中。然后li元素不需要浮动并显示内联。这样就可以了：

ul.nav {
    white-space: nowrap;
    overflow-x: auto;
}

ul.nav li {
    display: inline-block;
    float: none;
}

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

Answer 2

首先，我在滚动的标签实现中找到了fiddle。

其次，我不认为它是一个很好的用户体验，可以在标签栏中提供如此多的链接。我建议您使用下拉菜单或mega menu。

Answer 3

试试这个：

.nav{flex-wrap:nowrap;overflow-x:auto}