Bootstrap导航栏X轴滚动

Question

Bootstrap导航栏X轴滚动

7

我正在尝试改变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:

<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 保持在一行上，因为它们也叠放了。

- Goodbytes

4个回答

4

设置 overflow-x: auto;。当视口大小小于已设定的宽度时，这将起作用。

.scroll {
  white-space: nowrap;
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch;
}

http://jsfiddle.net/x3L06cv8/

- Ferrmolina

1

正是我所需要的：overflow-x: auto - FearlessFuture

0

我希望能在 JSfiddle 或其他地方查看你的工作。但是我认为你没有正确使用媒体查询，某些范围内的 CSS 代码并没有被正确应用。

因此，你应该尝试调整媒体查询，将它们全部设置为最大宽度： @media (max-width:...) 对于桌面媒体查询，请将其设置为 min-width:1200px 或任何你想要的宽度，这样它就适用于所有大于该宽度的设备。

至于品牌，尝试将其设置为：

.navbar-nav{
position:absolute;
margin-left:10%; /* Or change it as your needs */
}

否则，创建一个包含navbar-header和navbar-nav的div标签，并为内部元素两者应用与li标签相同的display属性。像我制作的这个例子一样：

<html>
<head>
    <title></title>
    <style type="text/css">
        .all div,ul,li{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="all">
        <div>Hahaha</div>
        <ul>
            <li>jlshqdm</li>
            <li>jlshqdm</li>
        </ul>
    </div>
</body>
</html>

- BahaEddine Ayadi

0

在Bootstrap 5.3及其后续版本中，您可以简单地添加内置的flex-nowrap和overflow-x-auto类：

<ul class="nav nav-underline flex-nowrap overflow-x-auto">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link</a>
  </li>
</ul>

- Wadih M.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christopher · Accepted Answer

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

由于这里的答案与Bootstrap 3.3.5（甚至更早版本）有关，对于当前的Bootstrap版本没有用处。

对于当前版本，无需将flex元素（在此情况下为li {display：block}）转换为inline-block。根据CSS属性，如果CSS属性flex-direction为row，则flex元素将处理子元素类似于inline-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>