我正在尝试改变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;
}
这是一个移动端视图的图片,它表现得很好:
![enter image description here](https://istack.dev59.com/zMHys.webp)
![enter image description here](https://istack.dev59.com/WIlIM.webp)
![enter image description here](https://istack.dev59.com/P9Yjp.webp)
<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>
overflow-x: auto
- FearlessFuture