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

Question

如 本小提琴 所示，在 Bootstrap 中添加太多元素 .nav 会导致它仅垂直向下添加项目。我将如何限制它的高度并使其水平滚动？

原文由 Matoe 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 DavidG 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这个：

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

原文由 Ishan Krishna Vatsa 发布，翻译遵循 CC BY-SA 4.0 许可协议