BOOTSTRAP 3：自定义导航栏切换问题

Question

我的Bootstrap 3导航栏上的菜单选项之间有红线，如下图所示：

使用以下代码实现：

<style>

    .navbar-nav li{
      position: relative
  }
  .navbar-nav li:after{
      content: '';
      position: absolute;
      right: -2px;
      width:2px;
      height: 50%;
      top: 25%;
      background: red
  }
    .navbar-nav li:before{
      content: '';
      position: absolute;
      left: 0px;
      width:2px;
      height: 50%;
      top: 25%;
      background: red
  }

</style>

我遇到的问题是，当浏览器窗口大小低于768的宽度时，切换按钮会启动，一旦选中，则会在下拉列表的底部显示一个丑陋的滚动条，如下所示：

当我向右滚动时，显示的是红色条，如下所示：

我尝试了各种选项，似乎解决方案与页面的媒体宽度有关，但我不能完全理解它。理想情况下，当引导切换开始时，我不会显示红色条。

对此有任何帮助将不胜感激。

Answer 1

您需要在媒体查询中定义红线。自从您使用bootstrap以来，很可能已经定义了媒体查询。

@media (min-width: 768px) {
  .navbar-nav li:after{
    content: '';
    position: absolute;
    right: -2px;
    width:2px;
    height: 50%;
    top: 25%;
    background: red
  }
  .navbar-nav li:before{
    content: '';
    position: absolute;
    left: 0px;
    width:2px;
    height: 50%;
    top: 25%;
    background: red
  }
}

Answer 2

你可以简单地使用

@media (max-width:768px) { 
  .navbar-nav {
    overflow-x:hidden;
  }
}