Bootstrap 导航栏 x 滚动
Goo*_*tes 7 css twitter-bootstrap twitter-bootstrap-3
我正在尝试更改 Bootstrap 导航栏的行为以继承水平滚动而不是折叠，它适用于移动设备，但我希望它在所有设备上都相同......使用 SASS：
.navbar-nav {
li {
display: inline-block; // stops menu items from stacking
}
}
.scroll {
white-space: nowrap;
overflow-x: scroll; // scroll
-webkit-overflow-scrolling: touch;
}
这是它在移动视图中的图像，效果很好：
当我增加视图端口的大小和媒体查询时，它完全禁用了水平滚动：
最后在桌面上：
HTML：
.navbar-nav {
li {
display: inline-block; // stops menu items from stacking
}
}
.scroll {
white-space: nowrap;
overflow-x: scroll; // scroll
-webkit-overflow-scrolling: touch;
}
有没有办法可以在整个网站上保持横向滚动？我无法确定是哪个 CSS 改变了它的行为。作为额外的好处，我还需要 .navbar 和 .navbar-header 保持内联，因为它们也是堆叠的。
较新版本的 Bootstrap 大量使用了 flex-elements，我在 Bootstrap 4.5.3 中遇到了类似的挑战，我最终将 CSS flex-wrap-property 更改为 nowrap。
由于此处的答案与 Bootstrap 3.3.5（或更早版本）相关，因此它们对于当前的 Bootstrap 版本没有用处。
对于当前版本，无需将 Flex 元素（本例中为 li { display: block }）转换为内联块。根据 CSS props，如果 CSS-prop flex-direction 为 row，则 flex 元素将子元素处理为类似于 inline-block 的内容。
参考：
- https://developer.mozilla.org/en/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
- https://www.w3.org/TR/css-flexbox-1/#overview
在不修改/添加 CSS 类的情况下，我最终得到的是：
<html>
<head>...</head>
<body>
<ul class="nav text-nowrap flex-nowrap" style="overflow-x: auto;">
...
</ul>
</body>
</html>
在导航上添加一个额外的 CSS 类的替代方案：
HTML：
<html>
<head>
...
<style>
.flex-scroll-x {
overflow-x: auto;
white-space: nowrap;
flex-wrap: nowrap;
}
</style>
</head>
<body>
<ul class="nav flex-scroll-x">...</ul>
</body>
</html>
放overflow-x: auto;。当视口大小其宽度的较小值确定时，这将起作用。
.scroll {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}