我正在尝试更改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-scroll?我不能指出改变它的行为的CSS。作为额外的奖励,我还需要.navbar和.navbar-header来保持内联,因为它也是堆叠。
答案 0 :(得分:3)
设置overflow-x: auto;
。当视口大小小于宽度时,这将起作用。
.scroll {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
答案 1 :(得分:1)
较新版本的Bootstrap大量使用了flex-elements,我在Bootstrap 4.5.3中遇到了类似的挑战,最终我将CSS flex-wrap-property更改为nowrap。
由于此处的答案与Bootstrap 3.3.5(甚至更旧)有关,因此它们对于当前的Bootstrap版本没有用。 ?
对于当前版本,无需将flex-elements(在这种情况下为li {display:block})转换为内联块。根据CSS道具的不同,如果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>
答案 2 :(得分:0)
我希望你的工作在JSfiddle或其他什么。 但我所想的是你没有正确使用媒体查询,而且还有一个范围没有正确应用css代码。
所以你应该玩媒体查询,尝试用max-width创建它们: @media(最大宽度:......) 当涉及到桌面媒体查询时,请使用最小宽度:1200px或您希望拥有的任何宽度,因此它适用于大于该宽度的所有设备。
对于该品牌,请尝试为此制作:
.navbar-nav{
position:absolute;
margin-left:10%; /* Or change it as your needs */
}
或者,在其中创建一个div标签,其中包含navbar-header和navbar-nav,并为两个内部元素应用类似于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>
&#13;