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

【问题标题】：How to create a horizontal-scrolling nav in Bootstrap?如何在 Bootstrap 中创建水平滚动导航？
【发布时间】：2015-02-08 01:05:24
【问题描述】：

正如this fiddle 中所展示的，在引导程序.nav 中添加太多元素会导致它只是垂直向下添加项目。我将如何限制它的高度并使其水平滚动？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

完美。在我的情况下，nav 被包裹在 display: table div 中，我必须将 table-layout: fixed 添加到其中，并将 width: 100% 添加到 ul.nav。
如何在white-space: nowrap 中使用下拉菜单？如果您应用 white-space 属性，则下拉菜单仅位于所有元素的后面。
@AlexanderKim 您甚至不给这个答案投票就希望得到帮助？无论如何，提出这样的问题应该作为一个问题来完成，而不是在这里发表评论。
@DavidG，请你看看我的问题：stackoverflow.com/questions/52163551/…
@AlexanderKim 那是 Bootstrap 4，我有一段时间没有做前端开发，也没有使用过 v3 之后的任何东西。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：