问引导程序导航栏不显示
EN

Stack Overflow用户

提问于 2020-09-11 22:28:57

回答 1查看 177关注 0票数 0

所以我想用bootstrap把nav-bar添加到我的页面上，但是由于某种原因，它就是不能显示，我已经正确地下载了bootstrap文件和jquery 3.5.1，但是我的导航栏仍然不能显示，我不确定这是否会有帮助，但是当我检查页面时(控制台没有给出错误提示)，它显示来自bootstrap的样式正在被覆盖

Bootstrap styles are not being applied

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset ="utf-8">
  <meta name= "viewport" content = "width=device-width, initial-scale =1">
  <title>Solution Assignment Module-3!</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

 <header>
  <nav id="header-nav" class="navbar navbar-default">
    <div class="container">

    </div>
  </nav>
 </header>





<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

twitter-bootstrap

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-12 17:43:02

出现此错误的原因是您添加了最新版本的引导CSS文件和最新版本不支持的"navbar-default“。

您可以使用旧版本的bootstrap CSS，就像我在这里所做的那样，或者根据最新版本的bootstrap添加最新的导航条形码。

你可以试试这段代码。

<!DOCTYPE html>
        <html lang = "en">
        <head>
          <meta charset ="utf-8">
          <meta name= "viewport" content = "width=device-width, initial-scale =1">
          <title>Solution Assignment Module-3!</title>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
          <link rel="stylesheet" href="css/styles.css">
        </head>
        <body>
    
         <header>
          <nav id="header-nav" class="navbar navbar-default">
            <div class="container">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a href="#" class="nav-link">menu1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu3</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu4</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">menu5</a>
                    </li>
                </ul>
            </div>
          </nav>
         </header>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        </body>
        </html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63849057

复制

相似问题

问引导程序导航栏不显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序导航栏不显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导程序导航栏不显示
EN