我已经从此链接下载了 Bootstrap 的编译 CSS 和 JS版本。将其解压缩到我的项目根目录中,并在我的 html 文件中引用它们。我的 html 文件现在是这样的:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo Maker</title> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav></body><script src="bootstrap/js/bootstrap.min.js"></script></html>现在,如果我运行该页面,则它不会正确显示引导导航栏。它的显示就像这个 屏幕截图但如果我使用 cdn 来引导 css 和 js,那么它就可以完美工作。我究竟做错了什么?=====编辑========经过一番挖掘后,我发现我无法在 bootstrap.min.css 或我下载的 bootstrap.css 文件中找到引导样式。例如,我找不到类 .navbar-inverse的任何样式。
1 回答
慕的地8271018
TA贡献1796条经验 获得超4个赞
您需要在元素中包含.navbar-expand
或类名才能使引导样式起作用。.navbar-expand{-sm|-md|-lg|-xl}
<nav>
然后,您还需要为导航链接添加正确的类名,如下所示:
<li class="nav-item"> <a class="nav-link" href="#">Page 1</a> </li>
- 1 回答
- 0 关注
- 113 浏览
添加回答
举报
0/150
提交
取消