我遇到这个问题,我的菜单不适用于使用boostrap的下拉菜单。这是我的代码:
<nav role="navigation" class="col-sm-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--== Logo ==-->
<span class="navbar-brand logo">
<img src="images/logo.png" alt="Rio Duero" title="Rio Duero"/>
</span>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<!--== Navigation Menu ==-->
<ul class="nav navbar-nav">
<li class="current"><a href="#header">Home</a></li>
<li><a href="#empresa">Empresa</a></li>
<li><a href="#produccion">Zona Producción</a></li>
<li><a href="#biodinamico">Biodinámico</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#certificaciones">Certificaciones</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</div>
</nav>
&#13;
我可以看到的网站是:http://rioduero.cl/index23.php
答案 0 :(得分:0)
请检查标题,然后使用**Bootstrap CDN**
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" ></script>
您的代码正在运行,请检查它 https://jsfiddle.net/2017mb/gadxqgju/
答案 1 :(得分:0)
请务必在下面添加以下链接
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" ></script>
尝试下拉列表
<ul class="nav navbar-nav">
<li class="current"><a href="#header">Home</a>
<ul>
<li><a href="#empresa">Empresa</a></li>
<li><a href="#produccion">Zona Producción</a></li>
<li><a href="#biodinamico">Biodinámico</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#certificaciones">Certificaciones</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</li>
</ul>
答案 2 :(得分:0)
你的代码是正确的jsu添加这些库:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>