Question

我遇到这个问题，我的菜单不适用于使用boostrap的下拉菜单。这是我的代码：

＆＃13;

<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

Answer 1

请检查标题，然后使用**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/

Answer 2

请务必在下面添加以下链接

<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>

Answer 3

你的代码是正确的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>

与boostrap下拉错误

3 个答案: