【发布时间】:2018-07-04 10:01:33
【问题描述】:
我网站上的下拉菜单只是拒绝工作,我不明白为什么。我浏览了这个站点和其他站点,并重新阅读了引导文档,但我只是不知道为什么它不起作用。他们不会下拉。我知道它们被单击了,因为当我单击它们时,URL 中会出现井号,但不会出现拖放动画。
下面是我的代码,带有头部和导航栏。
其他人能看出什么问题吗?
<head>
<title>Scott's Website</title>
<link rel="stylesheet" type="text/css" href="styles/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="styles/bootstrap/css/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="styles/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid bg-dark">
<div class="container bg-dark">
<div class="pl-3 pr-3 pt-3 pb-0 row bg-dark text-light">
<div class="col-9">
<h1>Scott McMullan</h1>
<div class="row pt-0 pb-0 pl-0 pr-3 bg-dark text-light">
<div class="col-9">
<h7 class="font-weight-light">Studying full time at Griffith University.</h7>
</div>
</div>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<div class="col">
<h7 class="font-weight-light">Working towards a bachelor of Computer Science, majoring in Data Science & Artificial Intelligence.</h7>
</div>
</div>
<hr/>
<div class="row pt-0 pb-3 pl-0 pr-3 bg-dark text-light">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">
<img src="icon.jpg" width="30" height="30" alt="mannaz" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Experience
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Academic Course Breakdown</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Projects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Professional</a>
<a class="dropdown-item" href="#">Academic</a>
<a class="dropdown-item" href="#">Personal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
【问题讨论】:
标签: twitter-bootstrap drop-down-menu navigation bootstrap-4