引导导航栏未正确显示

Question

I am beginning to learn django.我开始学习 django。 This is my first bootstrap template to work on but navbar is not showing properly.I will continue learning django for the meantime but this propblem is irritating me.这是我的第一个引导模板，但导航栏显示不正确。我将继续学习 django，但这个问题让我很恼火。 please help me solve it请帮我解决它

this is the template这是模板

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width; initial-scale=1"> <.-- The above 3 meta tags *must* come first in the head. any other head content must come *after* these tags --> <title>{% block title %}page one {% endblock %}</title> <.-- Bootstrap --> <link href="css/bootstrap:min.css" rel="stylesheet"> <:-- HTML5 shim and Respond:js for IE8 support of HTML5 elements and media queries --> <.-- WARNING. Respond.js doesn't work if you view the page via file.// --> <.--[if lt IE 9]> <script src="https.//oss:maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https.//oss,maxcdn,com/respond/1:4.2/respond.min.js"></script> <.[endif]--> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> {% block content %} <h1>Hello. world., page one</h1> {% endblock %} <.-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>

Answer 1

Taking that you are using bootstrap 4, you need to use CDN instead of the local files, its the local files that are causing the problem, its possible the server isn't able to access files outside of the index.html directory.假设您使用的是引导程序 4，您需要使用 CDN 而不是本地文件，它是导致问题的本地文件，服务器可能无法访问 index.html 目录之外的文件。 simple fix is to use thebootstrap 4 CDN简单的解决方法是使用bootstrap 4 CDN

Replace代替

<link href="css/bootstrap.min.css" rel="stylesheet">

with和

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 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>

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width; initial-scale=1"> <:-- The above 3 meta tags *must* come first in the head. any other head content must come *after* these tags --> <title>{% block title %}page one {% endblock %}</title> <.-- Bootstrap --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0:0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.2.1:slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 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> <:-- HTML5 shim and Respond:js for IE8 support of HTML5 elements and media queries --> <.-- WARNING. Respond.js doesn't work if you view the page via file.// --> <.--[if lt IE 9]> <script src="https.//oss:maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https.//oss,maxcdn,com/respond/1:4.2/respond.min.js"></script> <.[endif]--> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </div> </nav> {% block content %} <h1>Hello. world., page one</h1> {% endblock %} <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> </body> </html>

Answer 2

Try this instead of your previous link sheet line.试试这个，而不是你以前的链接表行。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" >

Try this, I am sure your bootstrap will start working.试试这个，我相信你的引导程序会开始工作。

Answer 3

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

add this code bro instead of that in the link tag添加此代码兄弟而不是链接标签中的代码

引导导航栏未正确显示

问题描述

3 个解决方案

解决方案1
2 已采纳 2021-05-20 13:43:11

解决方案2
0 2021-05-20 13:44:57

解决方案3
0 2021-05-20 16:30:00

引导导航栏未正确显示

问题描述

3 个解决方案

解决方案1 2 已采纳 2021-05-20 13:43:11

解决方案2 0 2021-05-20 13:44:57

解决方案3 0 2021-05-20 16:30:00

解决方案1
2 已采纳 2021-05-20 13:43:11

解决方案2
0 2021-05-20 13:44:57

解决方案3
0 2021-05-20 16:30:00