Bootstrap 导航栏未正确加载 [英] Bootstrap navbar not loading properly

问题描述

我是引导程序的新手，我最近使用了他们的模板之一，一切正常，但我的导航栏没有正确加载，它应该如下所示:我应该得到什么

但它在 chrome 和 firefox 中都是这样的:我得到了什么

这是我的 html(只有导航部分)

<nav class="navbar navbar-inverse navbar-fixed-top"><div class="容器"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">项目名称</a>

<div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系方式</a></li></div><!--/.nav-collapse -->

</nav>

你能帮忙吗?

解决方案

在 jsfiddle 上工作正常:

https://jsfiddle.net/ajrvrtz6/

我用过:支撑 v3.3

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/...;integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg‌ 4Va+PmSTsz/K68v 4anEj="cross"<!-- 最新编译和缩小的 JavaScript --><script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/...;integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mC‌ WNIpG9mGCD8wGNIcPD7T‌ ;<cross

I am new to bootstrap and I recently used one of their templates,all works well, but my navbar is not loading properly, it SHOULD look like this: What i Should be getting

But it looks like this in both chrome and firefox: What I get

and this is my html (only the nav part)

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>

Can you please help?

解决方案

Works fine on jsfiddle:

https://jsfiddle.net/ajrvrtz6/

I used: butstrap v3.3

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/…; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg‌​4Va+PmSTsz/K68vbdEjh‌​4u" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/…; integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mC‌​WNIpG9mGCD8wGNIcPD7T‌​xa" crossorigin="anonymous"></script>

这篇关于Bootstrap 导航栏未正确加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！