Question

Bootstraps下拉菜单的选项未显示。尝试移动min.js文件，容器div等，似乎没有任何工作。似乎有其他人遇到这个问题，他们的bootstrap和ajax脚本在错误的位置。我相信我的地方是正确的。我做错了什么？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Concept Noise</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<style>

    .jumbotron{
        background: url(http://imgstore.wdwmagic.com/imgstore/ElementGalleryItems/attractions/Fullsize/Mission-SPACE_Full_1489.jpg) no-repeat center center; 
        color: white;
        height: 550px;
        text-shadow: black 0.3em 0.3em 0.3em;
        text-align: center;
        color: #ffffff;
    }


    .jumbotron h1{

        margin-top: 10%;
        font-size: 80px;
    }

    .jumbotron p{

        margin-top: 2%;
    }

    #button {

        margin-top: 10%;
        border: 1px solid #FFFFFF;
    }

    .btn, .btn:hover, .btn:active, .btn:visited {
        background-color: #2D92FF !important; 
    }


    .btn-xl {
        padding: 10px;
        font-size: 20px;
        border-radius: 4px;
        width:30%; 
 }   

</style>

<body>

 <nav class="navbar navbar-light bg-faded navbar-fixed-top" id="navbar">
      <a class="navbar-brand" href="#">Concept Noise</a>
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#jumbotron">Destinations<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#news">News</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Easter Egg?</a>
        </li>
      </ul>  
 </nav>


  <div class="jumbotron">

    <h1>Concept Noise</h1>

    <p>Choose your destination, travel to another world.</p>

    <p><button type="button" id = "button" class="btn btn-xl btn-info">Epcot 1982</button></p>

  </div>

    <div class="page-header">
        <h1>Destinations</h1>
    </div>

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Please select your Destination
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href=""></a>Avatar land</li>
        <li><a href="#">The African Sehrengetty</a></li>
        <li><a href="#">Tommorowland 1970</a></li>
        <li><a href="#">Futureworld 1982</a></li>
      </ul>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">

$(document).ready( function() {
    $('.dropdown-toggle').dropdown();
});

</script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body>

Answer 1

在 head 部分粘贴此内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

删除正文部分中的所有脚本行，包括jquery“下拉”代码。 $（document）.ready（function（）{ $（ '下拉肘节。'）下拉（）; }）;不确定为什么你使用1.12.4版本的jquery，因为当前版本是3.2.1，这里是链接https://www.w3schools.com/jquery/jquery_get_started.asp

另外，我建议不要使用全宽容器，而只使用div class =“container”，因为你的下拉菜单一直向左，除非你点击它时将它向右移动一点。

第二个建议是使其具有响应性。调整窗口大小时，它应显示平板电脑和移动设备的汉堡菜单。

Bootstrap下拉菜单没有下降？

1 个答案: