Bootstrap导航栏折叠切换显示单条黑线代替菜单

我有一个很大的问题，试图让我的引导菜单项在折叠时显示菜单项。我搜遍了这个网站，并没有找到任何有效的工具。我可以找到的任何事情都会谈到jquery或bootstrap版本没有正确实现，或者折叠按钮是不可见的。从修补它，我已经发现问题是我的自定义CSS弄糟引导CSS，但我不能为我的生活弄清楚要改变什么来解决它。任何帮助，非常感激。这里是我的代码。Bootstrap导航栏折叠切换显示单条黑线代替菜单

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <!--Meta --> 
    <title>Navbar</title> 

    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

    <link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'> 


    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<!--Meta--> 
</head> 
<body> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <h1 class ="navbar-brand">Navbar</h1> 
    </div> 
     <div class="collapse navbar-collapse" id ="myNavbar"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#homey">Home</a></li> 
     <li><a href="#abou">About</a></li> 
     <li><a href="#porty">Portfolio</a></li> 
     <li><a href="#conty">Contact</a></li> 
     </ul> 
     </div> 
    </div> 

</nav> 
    </body> 
</html>

CSS

.navbar { 
    height: 125px; 
} 
.navbar-brand { 
    position: relative!important; 
    left: 100px!important; 
    bottom: 10px!important; 
    font-size: 4em!important; 
    color: white!important; 
    font-family: 'Montserrat', sans-serif; 
} 

.nav.navbar-nav.navbar-left li a { 
    color: white; 
    position: relative; 
    right: 175px; 
    top: 66px; 
    font-family: 'Montserrat', serif; 
} 

.nav.navbar-nav.navbar-left li a:hover { 
    color: orange; 
} 

.navbar-collapse.collapse { 
    display: none !important; 
} 



@media (max-width: 990px) { 
    .navbar-header { 
    float: none !important; 
    } 
    .navbar-toggle { 
    display: block !important; 
    } 
    .navbar-collapse.collapse { 
    display: none !important; 
    } 
    .navbar-nav { 
    float: none !important; 
    margin: 7.5px -15px; 
    } 
} 

@media screen and (max-width: 768px) { 
    .navbar-brand { 
    font-size: 40px !important; 
    position: relative !important; 
    top: -20px !important; 
    left: -10px !important; 
    } 
    .navbar { 
    height: 70px; 
    } 
} 

@media screen and (max-width: 568px) { 
    .navbar-brand { 
    font-size: 30px !important; 
    position: relative !important; 
    bottom: 20px !important; 
    left: -3px !important; 
    !important; 
    } 
    .navbar { 
    height: 50px; 
    } 
} 

@media screen and (max-width: 420px) { 
    .navbar-brand { 
    font-size: 25px !important; 
    } 
} 

@media screen and (max-width: 365px) { 
    .navbar-brand { 
    font-size: 20px !important; 
    } 
} 

@media screen and (max-width: 275px) { 
    .navbar-brand { 
    font-size: 15px !important; 
    } 
}

下面是一个代码笔：Navbar

来源

2016-04-27 kgoode517

嗯，我在你的媒体查询中看到很多'display：none'，还有更多'！important'被调用。你应该避免像瘟疫一样调用'！important'，并学习如何覆盖Bootstrap的css，或者使用特定的标识符。 –

感谢您的建议，我会看到我可以改变。 – kgoode517

因为你.nav.navbar-nav.navbar-left li a {}实际上其定位关闭屏幕移动视图和它的当颜色是白色的，你无法看到它。

因此，当您的窗口进入手机尺寸时，我明确地删除了您的位置和颜色。另外，注意到我已将下面的display:none注释掉。这应该有助于你重新思考你的CSS。在移动视图中，除非您为标记指定不同的CSS，否则它将使用您之前指定的那个。试着把它粘贴在你的上面，然后调整它以满足你的需要。 :)

@media (max-width: 990px) { 
    .navbar-header { 
    float: none !important; 
    } 

    .nav.navbar-nav.navbar-left li a { 
     color: black; 
     right: 0px; 
     top: 0px; 
    } 
    .navbar-nav { 
    float: none !important; 
    margin: 7.5px -15px; 
    } 
}

来源

2016-04-28 00:44:21 MrWitts

这使得很多的意义，我已经试过你的解决方案。然而，当我尝试你的代码时会发生什么，菜单只会出现其他点击，并且一次只能显示几个部分。任何想法为什么？ – kgoode517

我真的不明白你的问题。 “一次点击其他点击，仅限于几个部分，你的意思是什么？”？ – MrWitts

我想我想通了你想说什么。你忘了“注释”出“navbar-toggle”和“navbar-collapse”吗？只要删除它，如果你没有。我编辑了上面的答案。 – MrWitts

Bootstrap导航栏折叠切换显示单条黑线代替菜单

回答

相关问题