css - Bootstrap 导航栏 x 滚动

我正在尝试更改 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;
}

这是它在移动 View 中的图像，效果很好:

当我增加视口(viewport)和媒体查询的大小时，它会完全禁用水平滚动:

最后在桌面上:

HTML:

<div class="navbar-header">
  <a class="navbar-brand" href="#"><i class="fa fa-home"></i></a>
</div>
<ul class="nav navbar-nav scroll">
  <li><a href="#">Hyperlink</a></li>
  <li><a href="#">Hyperlink</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret hidden-xs"></span></a>
    ...
  </li>
  <li><a href="#">Hyperlink</a></li>
  <li><a href="#">Hyperlink</a></li>
  <li><a href="#">Hyperlink</a></li>
  <li><a href="#">Hyperlink</a></li>
  <li><a href="#">Hyperlink</a></li>
  <li><a href="#">Hyperlink</a></li>
</ul>

有没有办法让整个网站都保持 x 滚动？我无法指出正在改变其行为的 CSS。作为额外的好处，我还需要 .navbar 和 .navbar-header 保持内联，因为它也在堆叠。

最佳答案

较新版本的 Bootstrap 大量使用 flex 元素，我在 Bootstrap 4.5.3 中遇到了类似的挑战，我最终将 CSS flex-wrap-property 更改为 nowrap。

由于此处的答案与 Bootstrap 3.3.5(或更早版本)相关，因此它们对当前的 Bootstrap 版本没有用。 😔

对于当前版本，无需将 flex 元素(在本例中为 li { display: block })转换为内联 block 。根据 CSS Prop ，如果 CSS Prop flex-direction 为行，则 flex 元素将子元素处理为类似于内联 block 的东西。

引用:

在没有修改/添加 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>

关于css - Bootstrap 导航栏 x 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31562075/

css - Bootstrap 导航栏 x 滚动

上一篇：css - MVC - 针对特定 View 的 CSS

下一篇：css - 元素动画关键帧的继承