默认情况下,我的boostrap导航栏在手机视图中总是被折叠.我该如何解决这个问题



这是我的导航栏代码。它在桌面视图中工作得很好,但在移动视图中,下拉菜单无法正常工作。我可能做错了什么?

<nav class="fixed-top navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span> Menu
</button>
<form action="#" class="searchform order-lg-last">

</form>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto mt-2">
<a class="navbar-brand" href="<?php echo base_url() ?>home"><img src="<?php echo base_url() ?>assets/images/logo.png"></a>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item "><a href="<?php echo base_url() ?>home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="<?php echo base_url() ?>about" class="nav-link">About</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">
Our Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Construction and Planning</a>
<a class="dropdown-item" href="#">Architecting</a>

<a class="dropdown-item" href="#">General Services</a>
<a class="dropdown-item" href="#">Interior Design</a>

</div>
</li>



<li class="nav-item"><a href="<?php echo base_url() ?>contact" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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"
/>
<title>Document</title>
</head>
<body>
<nav
class="fixed-top navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light"
id="ftco-navbar"
>
<div class="container">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#ftco-nav"
aria-controls="ftco-nav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="fa fa-bars"></span> Menu
</button>
<form action="#" class="searchform order-lg-last"></form>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav mr-auto mt-2">
<a class="navbar-brand" href="<?php echo base_url() ?>home"
><img src="<?php echo base_url() ?>assets/images/logo.png"
/></a>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="<?php echo base_url() ?>home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="<?php echo base_url() ?>about" class="nav-link">About</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"
>
Our Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Construction and Planning</a>
<a class="dropdown-item" href="#">Architecting</a>
<a class="dropdown-item" href="#">General Services</a>
<a class="dropdown-item" href="#">Interior Design</a>
</div>
</li>
<li class="nav-item">
<a href="<?php echo base_url() ?>contact" class="nav-link"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<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.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"
></script>
<!-- Always remember to call the above files first before calling the
bootstrap.min.js file -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"
></script>
</body>
</html>

你能试着添加这些脚本吗。它似乎在起作用。如果这对你有用,请告诉我。

相关内容

最新更新