Bootstrap navbar x-scroll

Question

我正在尝试更改 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 保持内联，因为它也在堆叠。

Answer 1

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

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

对于当前版本，无需将弹性元素（在本例中为 li { display: block }）转换为内联块。根据 CSS props，如果 CSS-prop 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>

Answer 2

设置

overflow-x: auto;

。这将在视口大小时宽度较小时起作用。

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

http://jsfiddle.net/x3L06cv8/

Answer 3

我希望有你在 JSfiddle 或其他方面的工作。但我在想的是你没有正确使用媒体查询，有一个范围没有正确应用 css 代码。

所以你应该尝试使用媒体查询，尝试让它们都具有 max-width ： @media（最大宽度：...）当涉及到桌面媒体查询时，请使用 min-width:1200px 或您喜欢的任何宽度，因此它将适用于所有大于该宽度的设备。

对于品牌，试着为它做这个：

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

否则，创建一个包含 navbar-header 和 navbar-nav 的 div 标签，并像对两个内部元素的 li 标签一样应用显示属性。就像我做的这个例子：

<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>

Answer 4

在最近的版本中，您可以简单地添加内置的

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>

当前版本 5.3

Bootstrap navbar x-scroll

问题描述投票：0回答：4

4个回答

最新问题

Bootstrap navbar x-scroll

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4