导航链接在导航栏中不起作用（Bootstrap）（Django）
Posted
技术标签:
【中文标题】导航链接在导航栏中不起作用（Bootstrap）（Django）【英文标题】：Navigation links not working in navbar (Bootstrap)(Django) 【发布时间】：2017-08-31 08:17:57 【问题描述】：我正在使用 django 1.10 和 python 3.6 创建一个网站。 我的网络应用程序称为“配置文件”，项目称为“firstsite”。我使用了来自 bootstrap 的模板，该模板保存为“base.html”。我的 webapp 中有两个页面使用模板“home.html”和“about.html”。导航栏是另一个名为“navbar.html”的 html 文件。我正在尝试在导航栏中链接“主页”和“关于”。链接后，当我运行服务器并打开“http://127.0.0.1:8000/”时，出现“NoReverseMatch at/”错误。
firstsite/firstsite/urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^', include('profiles.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
firstsite/profiles/urls.py
from django.conf.urls import url
from profiles import views
app_name = 'profiles'
urlpatterns = [
url(r'^$', views.home, name='home'),
url(r'^about/$', views.about, name='about'),
]
firstsite/profiles/views.py
from django.shortcuts import render
def home(request):
context = locals()
template = 'home.html'
return render(request, template, context)
def about(request):
context = locals()
template = 'about.html'
return render(request, template, context)
firstsite/profiles/templates/base.html
% load staticfiles %
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Theme Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="% static 'css/bootstrap.min.css' %" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="% static 'css/bootstrap-theme.min.css' %" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="% static 'css/theme.css' %" rel="stylesheet">
<link rel='stylesheet' href='% static "css/main.css" %'>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<![endif]-->
</head>
<body>
% include 'navbar.html'%
<div class="container theme-showcase" role="main">
% block content %
% endblock %
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Theme example</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="% static 'javascript/bootstrap.min.js' %"></script>
<script src="% static 'javascript/docs.min.js' %"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
firstsite/profiles/templates/home.html
% extends 'base.html' %
% block content %
<h1>Hello World. I'm Back.</h1>
% endblock %
firstsite/profiles/templates/about.html
% extends 'base.html' %
% block content %
<h1>Hello About</h1>
% endblock %
firstsite/profiles/templates/navbar.html
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="% url 'home' %">Home</a></li>
<li><a href="% url 'about' %">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
正如您在 navbar.html 中看到的，% url 'home' % 应该可以工作，但我收到此错误：
Error Screenshot
如果我在 navbar.html 中删除 % url 'home' % 并放置 #，则网站可以正常运行，没有任何错误。
【问题讨论】：
【参考方案1】：只需在命名网址之前使用应用名称
<li class="active"><a href="% url 'profiles:home' %">Home</a></li>
<li><a href="% url 'profiles:about' %">About</a></li>
这会很好用。
【讨论】：
非常感谢朋友。像魅力一样工作。 我很荣幸能帮助你。@K.Grewal以上是关于导航链接在导航栏中不起作用（Bootstrap）（Django）的主要内容，如果未能解决你的问题，请参考以下文章
切换按钮在引导程序4中不起作用，而角度7应用程序在导航栏中不起作用
导航栏下拉菜单（折叠）在 Bootstrap 5 中不起作用