stackoom
  简体   繁体   中英

bootstrap navbar not showing properly

 原文  2021-05-20 13:30:45  2   3    html/ jquery/ css/ django/ bootstrap-4

Question

I am beginning to learn 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. 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>

3 answers

solution1
 2 ACCPTED  2021-05-20 13:43:11

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. simple fix is to use thebootstrap 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>

solution2
 0  2021-05-20 13:44:57

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.

solution3
 0  2021-05-20 16:30:00

 <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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question In navbar glyphicon is not showing properly(Bootstrap) Bootstrap navbar not rendering properly Bootstrap Navbar not responding properly Bootstrap navbar not loading properly Bootstrap Navbar not Collapsing properly Navbar is not showing in bootstrap django Bootstrap Navbar Barely Showing BootStrap navbar not showing CSS not showing on Bootstrap Navbar Bootstrap: navbar showing a line
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM