在移动设备引导程序上创建自定义导航滚动

Question

我使用bootstrap在div im中制作了一个自定义导航栏。我希望溢出-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;
}

JSFiddle

Answer 1

编辑

为此，您可以为移动宽度添加媒体查询，并为导航栏的父级添加一个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/

现场示例