html - Bootstrap 3 : Custom Navbar Toggle Issue

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 的宽度时，切换按钮会启动，一旦被选中，就会在下拉列表的底部显示一个丑陋的滚动条，如下所示:

当我向右滚动时，它只显示如下所示的红色条:

我尝试了多种选择，似乎解决方案与页面的媒体宽度有关，但我就是无法完全实现。理想情况下，当 Bootstrap 切换启动时，我不会显示红色条。

如有任何帮助，我们将不胜感激。

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
  }
}