Bootstrap navbar collapse button does not working
Question
I'm trying to collapse this Navbar but is not working. Hope you can help me. The button is not doing anything.
This is my code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="/lsapp/public/">{{config ('app.name', 'LSAPP')}}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="#navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="/lsapp/public/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/lsapp/public/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/lsapp/public/services" tabindex="-1">Services</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/lsapp/public/posts" tabindex="-1">Blog</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
2 answers
solution1
0 2019-03-02 21:07:55
i have tested your code and its working. I guess you have a javascript error before bootstrap.js can be loaded.
Or jQuery isnt loaded before bootstrap.
please check the browser console (F12)
solution2
0 ACCPTED 2019-03-02 21:09:30
It is working please check if you had linked the bootstrap css and js files correctly If you are using cdn then
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
//Your navbar code here
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
if you are not using cdn then you should replace the src with the file path
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.