折叠的导航栏只显示在小屏幕上的引导

我想实现一个导航栏，在小设备上崩溃。这工作正常。折叠的导航栏只显示在小屏幕上的引导

但是，在中型和大型屏幕上，导航栏根本不显示。我希望导航栏像中型和大型屏幕的普通导航栏一样显示，然后折叠到小型设备的导航栏按钮中。我正在关注引导程序模板，不知道为什么导航栏根本不显示。

<body> 
<div class = "container"> 

<nav class="navbar navbar-default" > 


     <div class="navbar-header"> 
      <a class="navbar-brand" href="#"> 
       <img alt="logo" src="logo.png" width="250px;"> 
      </a> 


     <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false" aria-controls="navbar"> 
      &#9776; 
     </button> 
     </div> 


    <div class="navbar-collapse collapse" id="collapse-navbar">  
    <ul class="nav navbar-nav"> 
     <li class= "nav-item"><a class= "nav-link active" href="#">Home</a></li> 
     <li class= "nav-item"><a class= "nav-link" href="#">Build</a></li> 
     <li class= "nav-item"><a class= "nav-link" href="#">About</a></li> 
    </ul> 



    </div> 

</nav> 
</div>

这里是一个代码笔链接：https://codepen.io/gkunthara/pen/VWdrYj

来源

2017-07-17 brownmamba

您正在使用引导3标记并链接到引导4个CSS所链接的引导3的CSS和JavaScript像这样：

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

或者改变你的导航标记来引导4的标记像这样：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#"> 
    <img alt="logo" src="logo.png" width="250px;"> 
    </a> 
    <div class="collapse navbar-collapse" id="navbarNav"> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Build</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">About</a> 
     </li> 
    </ul> 
    </div> 
</nav>

来源

2017-07-17 01:41:43

这个工程！不知道我是在一个不同的引导。谢谢！ – brownmamba

你需要显示在中等和大屏幕的.navbar-header button。因此，改变

@media (min-width: 768px) 
{ 
    .navbar-toggle { 
     display: none; 
    } 
}

这

@media (min-width: 768px) 
{ 
    .navbar-toggle { 
     display: none; 
    } 

    .navbar-header button { 
     display: block; 
    } 
}

https://codepen.io/julysfx/pen/jwRYQB

来源

2017-07-17 00:25:00 terryeah

显示所有屏幕的合拢导航栏。我只是想让它出现一个正常的导航栏（固定在右边），然后当它到达小屏幕显示为一个折叠的导航栏 – brownmamba

查看更新的OP请 – terryeah

折叠的导航栏只显示在小屏幕上的引导

回答

相关问题