我正在尝试使用 metro UI css库，但我不明白为什么我的导航栏 css 不起作用。
这是我的 html 文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TelePrint Blog</title>
<link rel="stylesheet" href="http://localhost/teleprintblog/assets/css/metro-bootstrap.css">
<script src="http://localhost/teleprintblog/assets/js/jquery.js"></script>
<script src="http://localhost/teleprintblog/assets/js/metro.min.js"></script>
</head>
<body>
<nav class="navigation-bar dark fixed">
<nav class="navigation-bar-content">
<div class="element">
<a class="dropdown-toggle" href="#">METRO UI CSS</a>
<ul class="dropdown-menu" data-role="dropdown">
<li><a href="#">Main</a></li>
<li><a href="#">File Open</a></li>
<li class="divider"></li>
<li><a href="#">Print...</a></li>
<li class="divider"></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<span class="element-divider"></span>
<a class="element brand" href="#"><span class="icon-spin"></span></a>
<a class="element brand" href="#"><span class="icon-printer"></span></a>
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Search...">
<button class="btn-search"></button>
</div>
</form>
</div>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li><a href="#">Products</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<span class="element-divider place-right"></span>
<a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
<span class="element-divider place-right"></span>
<button class="element image-button image-left place-right">
Sergey Pimenov
<img src="images/211858_100001930891748_287895609_q.jpg"/>
</button>
</nav>
</nav>
<header class="headerr row">
<div class="col-md-6" style="border:3px solid #F00;">
<img src="http://localhost/teleprintblog/assets/img/logo.png"
class="img-responsive" alt="logo"/>
</div>
<div class="col-md-6" style="border:3px solid #F00;">
</div>
</header>
<section class="row">
<div class="col-md-1 col-xs-offset-1"
style="border:3px solid #00F;z-index:3;position:relative;">
asdasda
</div>
</section>
</body>
</html>
虽然我已经加载了所需的文件，但导航栏的 UI 显示不正确。导致问题的原因是什么？
我已经从 here 复制了 navbar 代码.
最佳答案
改变:
<nav class="navigation-bar dark fixed">
收件人:
<nav class="navigation-bar dark fixed-top"> <!-- Or fixed-bottom -->
如 documentation 中所述:
You can create fixed (top or bottom) navigation bar with built in subclasses `.fixed-top, .fixed-bottom.
关于javascript - Metro UI 库 : Css not loading，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21098907/