我使用 bootstrap 在 div im 中创建了一个自定义导航栏。我希望 overflow-x 在移动设备上滚动。问题是我想在移动设备上保持导航栏的最大宽度并滚动它。
我不希望 li 标签一个接一个地出现。
例如:错误的方式
按钮 1
按钮 2
按钮 3
按钮4等等
正确的方法
按钮 1 |按钮 2 |按钮 3 |按钮 4 |依此类推并使其在移动设备上滚动
HTML
<div class="col-md-10">
<ul class="my-nav">
<li><a class="btn-nav tab-active" href="">Button 1</a></li>
<li><a class="btn-nav" href="">Button 2</a></li>
<li><a class="btn-nav" href="">Button 3</a></li>
<li><a class="btn-nav" href="">Button 4</a></li>
<li><a class="btn-nav" href="">Button 5</a></li>
</ul>
</div>
CSS
.my-nav {
margin: 0;
padding: 0;
list-style: none;
}
.my-nav li {
float: left;
}
.my-nav li a, .my-nav li a:link, .my-nav li a:visited {
color: #000;
font-size: 15px;
}
.my-nav li a:hover {
border-bottom: 4px solid #CCC;
}
a.btn-nav.tab-active, a.btn-nav.tab-active:visited, a.btn-nav.tab-active:hover {
color: #27a020;
border-bottom: 4px solid #27a020;
}
.btn-nav {
display: block;
text-align: center;
padding:15px 25px;
}
最佳答案
编辑
为此,您可以使用 overflow-x: scroll;
属性为导航栏的父级添加移动宽度的媒体查询:
@media (max-width: 640px){
.parent {
overflow-y:hidden;
overflow-x:scroll;
}
.my-nav {
height: 70px;
width: 600px;
}
}
我自愿应用固定宽度来使水平滚动有效,但如果您愿意,可以使用 javascript 脚本计算它。
获取有关设备宽度的信息: http://www.mydevice.io/devices/
关于html - 在移动设备 Bootstrap 上制作自定义导航滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37324649/