Twitter bootstrap 小型设备上的水平导航栏滚动
我用的是bootstrap4。我使用创建了第二个导航栏Twitter bootstrap 小型设备上的水平导航栏滚动,twitter-bootstrap,bootstrap-4,navbar,nav,horizontal-scrolling,Twitter Bootstrap,Bootstrap 4,Navbar,Nav,Horizontal Scrolling,我用的是bootstrap4。我使用创建了第二个导航栏 <div class="nav-active-border b-danger bottom"> <ul class="nav nav-active-border b-warning flex-row"> <li class="nav-item">Link 1</li> <li class="nav-item">Link 2</li>
<div class="nav-active-border b-danger bottom">
<ul class="nav nav-active-border b-warning flex-row">
<li class="nav-item">Link 1</li>
<li class="nav-item">Link 2</li>
<li class="nav-item">Link 3</li>
<li class="nav-item">Link 4</li>
<li class="nav-item">Link 5</li>
<li class="nav-item">Link 6</li>
<li class="nav-item">Link 7</li>
<li class="nav-item">Link 8</li>
<li class="nav-item">Link 9</li>
</ul>
</div>
链接1
链接2
链接3
链接4
链接5
链接6
链接7
链接8
链接9
然而,这在手机上显示在两行中有多个项目。如何在手机上为这些导航项目创建一个水平滚动条,该滚动条带有仅用于手机布局的指示器。它在台式机和笔记本电脑上显示完美
我正试图在谷歌上实现同样的目标
我使用flexbox实用程序类通过Bootstrap 4创建了类似的东西 使用一个小jQuery来切换
justify content end
类,该类将导航项目对齐到右侧,而不是左侧。您可以切换以向任意方向滑动导航。CSS转换用于滑动动画
演示:
CSS
<div class="container">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<a href="#" class="btn-left btn-link toggle p-2"><i class="ion-chevron-left"></i></a>
</div>
<div class="flex-grow-1 w-100 o-hidden">
<ul class="nav nav-fill text-uppercase position-relative flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Self</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">World</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Lifestyle</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Bio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Politics</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Local</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Science</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Tech</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Health</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Food</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Design</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Culture</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Travel</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">More</a>
</li>
</ul>
</div>
<div class="flex-shrink-0">
<a href="#" class="btn-right btn-link toggle p-2"><i class="ion-chevron-right"></i></a>
</div>
</div>
</div>
$('.toggle').click(function(){
$('.nav').toggleClass("justify-content-end");
});
.o-hidden {
overflow:hidden;
}
.nav {
transition: transform 0.4s;
transform: translateX(50%);
left: -50%;
}
.nav.justify-content-end {
transform: translateX(0);
left: 0;
}