所以我有一个用 Bootstrap 制作的导航栏。我在悬停菜单元素下方使用了边框,因此当您将鼠标悬停在菜单项上方时,您会得到一条线出现在菜单项下方的效果。但是我的菜单的折叠版本有几个问题。
1) 边框不会在我的垂直折叠菜单中消失。看起来很可笑。
2) li 元素在平板电脑上看起来很糟糕。它们仍然在线显示,并且撞到页面左 Angular 的 Logo (这是我的代码链接中看不到的图像)。
我基本上想知道如何自定义折叠菜单或垂直菜单,但我似乎找不到太多关于这个主题的信息。这是一个 codeply,所以你可以明白我在说什么。
最佳答案
出现问题是因为您使用 css
在 991px
及以下触发切换菜单,其中默认情况下 Bootstrap 切换菜单在 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) li 元素在平板电脑上看起来很糟糕。它们仍然在线显示,并且撞到页面左 Angular 的 Logo (这是我的代码链接中看不到的图像)。
@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;
}
}
关于jquery - 如何在 Bootstrap 中自定义折叠菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31889177/