Question

所以我有一个我用Bootstrap制作的导航栏。我在悬停菜单元素下面使用了一个边框，因此当您将鼠标悬停在菜单项上时，可以看到显示在菜单项下方的一条线的效果。但我的菜单折叠版本有一些问题。

1）我的垂直折叠菜单中的边框不会消失。这看起来很荒谬。

2）李元素在平板电脑上看起来很糟糕。它们显示为内嵌静止，并且它们碰到页面左下角的徽标（这是我的代码链接中无法看到的图像）。

我基本上想知道如何自定义折叠菜单或垂直菜单，但我似乎无法找到关于这个主题的内容。这是一个代码，所以你可以看到我在说什么。

http://www.codeply.com/go/TI1k70CPFm

Answer 1

问题发生的原因是您使用991px触发了css及以下的切换菜单，其中767px及以下的默认自举切换菜单触发。

要解决这个问题，我们需要在991px及以下版本中设置自定义样式。

1）我的垂直折叠菜单中的边框不会消失。这看起来很荒谬。

@media (max-width: 991px) {
    .navbar-default .navbar-nav > li > a:hover::after,
    .navbar-default .navbar-nav > li > a:focus::after {
        display: none;
    }
}

2）李元素在平板电脑上看起来很糟糕。它们显示为内嵌静止，并且它们碰到页面左下角的徽标（这是我的代码链接中无法看到的图像）。

@media (max-width: 991px) {
  .navbar-nav {
    margin: 7.5px -15px;
    width: 100%;
    float: none !important;
  }

  .nav>li {
    position: relative;
    display: block;
    float: none;
  }
}

汇总在媒体查询max 991px

中

@media (max-width: 991px) {
  .navbar-nav {
    margin: 7.5px -15px;
    width: 100%;
    float: none !important;
  }

  .nav>li {
    position: relative;
    display: block;
    float: none;
  }
  .navbar-default .navbar-nav > li > a:hover::after,
  .navbar-default .navbar-nav > li > a:focus::after {
    display: none;
  }
}

Codeply

如何在Bootstrap中自定义折叠菜单

1 个答案: