css Bootstrap navbar x-scroll

lvjbypge 于 2023-04-22 发布在 Bootstrap

关注(0)|答案(4)|浏览(148)

我试图改变 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保持内联，因为这是堆叠以及。

css

来源：https://stackoverflow.com/questions/31562075/bootstrap-navbar-x-scroll

4条答案

按热度按时间

b1zrtrql1#

较新版本的Bootstrap大量使用了flex-elements，我在Bootstrap 4.5.3中遇到了类似的挑战，我最终将CSS flex-wrap-property更改为nowrap。
由于这里的答案与Bootstrap 3.3.5（甚至更早）有关，因此它们对当前的Bootstrap版本没有用处。😔
对于当前版本，不需要转换flex-elements（li { display：根据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>

在nav上添加一个额外的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>

赞(0）回复(0）举报 2023-04-22

bqujaahr2#

设置overflow-x: auto;。这将工作时，视口大小其次要的宽度稳定。

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

http://jsfiddle.net/x3L06cv8/

赞(0）回复(0）举报 2023-04-22

juud5qan3#

我希望有你的工作JSfiddle或东西。但我想的是，你没有使用媒体查询的权利，有一个范围，没有适当地应用到它的css代码。
所以你应该尝试使用媒体查询，尝试使用max-width：@media（max-width：...），当涉及到桌面媒体查询时，使用min-width：1200 px或任何你喜欢的宽度，所以它将适用于所有大于该宽度的设备。
为了品牌，试着为它做这个：

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

或者，创建一个div标签，其中包含navbar-header和navbar-nav，并像为两个内部元素的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>

赞(0）回复(0）举报 2023-04-22

jecbmhm34#

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

赞(0）回复(0）举报 2023-04-22

我来回答

css Bootstrap navbar x-scroll

4条答案

相关问题

热门标签

最新问答