Question

所以我想使用bootstrap将nav-bar添加到我的页面中，但是由于某种原因它不会显示，我已经正确下载了bootstrap文件和jquery 3.5.1，但我的navbar仍然不显示向上，我不确定这是否有帮助，但是当我检查页面时（控制台没有错误，顺便说一句），它表明引导程序中的样式已被覆盖

Bootstrap styles are not being applied

wrap

Answer 1

出现此错误是因为您添加了最新版本的引导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>

Bootstrap导航栏不会显示

1 个答案: