BootStrap Navbar崩溃问题

我注释掉了代码的其余部分，看它是否是导致问题的外部元素，它们不是。 jQuery链接，BootStrap也是如此。该按钮显示，但折叠功能不起作用。也许这只是我的眼睛，我拼写错误，但这段代码有什么问题？BootStrap Navbar崩溃问题

<div class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 
<div class="navbar-brand"> 
    <a href="#about"> 
    <span class="glyphicon glyphicon-lamp"></span>Tommy Mertell 
    </a> 
</div> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="glyphicon glyphicon-lamp" style="color:white;"></span> 
    </button> 
<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#home" class="active">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#port">Portfolio</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
    </div> 
    </div>

来源

2015-12-10 Tommy Mertell

我们可以看到页面的小提琴/笔吗？看到JavaScript以及它如何与HTML交互是至关重要的。 –

我评论了所有内容，唯一没有评论的是你在这里看到的代码，它不能正常工作。 –

看到JS仍然很重要：它可能是导致问题的原因。 – Tugzrida

打开控制台，并确保你没有在页面上的任何错误。我复制了你的代码，并把它放在一个Bootstrap和jQuery的页面上，它对我很有用。虽然你应该改变结构，因为有一些水平滚动条。我会把你的品牌和你的导航栏切换按钮放在一个带有类navbar-header的div中。

来源

2015-12-10 20:08:52 Frank

由于某些奇怪的原因，添加“标题部分”你能告诉我为什么吗？ –

@Tommy Mertell在我的回答中解释你的问题。 –

Here is a fiddle with your updated pen。

您没有结束您的评论。

你开始评论...

<!--

但是你没有添加结束注释行。

-->

因此，jQuery和Bootstrap不会在页面的末尾加载。

来源

2015-12-10 20:15:47

是的，我注意到这一次，我通过代码搜索，但弗兰克的答案是为我解决它。即使我更正了HTML注释，但直到添加了navbar-header的包含类时才正常工作。不过谢谢你指出。 :) –

你会注意到我在这里发布的笔，它的工作原理，并没有'navbar-header'类。 –

我知道，但由于一些奇怪的原因，即使在我更正了HTML注释之后，我仍然无法正常工作。也许它是越野车？ –

你可以尝试替换脚本和链接标签引导和jQuery，并把这些（按照相同的顺序）。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

也许是与版本或您加载脚本/ css的顺序有关。

希望有帮助！

来源

2015-12-10 20:21:45 Manuel

BootStrap Navbar崩溃问题

回答

相关问题