Bootstrap 4 引导下拉菜单未下拉？_Bootstrap 4

Bootstrap 4 引导下拉菜单未下拉？

bootstrap-4

Bootstrap 4 引导下拉菜单未下拉？,bootstrap-4,Bootstrap 4,引导选项下拉菜单不显示。尝试移动min.js文件、容器div等，但似乎没有任何效果。似乎其他有此问题的人在错误的地方使用了引导和ajax脚本。我相信我的在正确的地方。我做错了什么 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name

引导选项下拉菜单不显示。尝试移动min.js文件、容器div等，但似乎没有任何效果。似乎其他有此问题的人在错误的地方使用了引导和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>


概念噪音
琼伯伦先生{
背景：url(http://imgstore.wdwmagic.com/imgstore/ElementGalleryItems/attractions/Fullsize/Mission-SPACE_Full_1489.jpg)无重复中心；
颜色：白色；
高度：550px；
文本阴影：黑色0.3em 0.3em 0.3em；
文本对齐：居中；
颜色：#ffffff；
}
jumbotron h1博士{
利润率最高：10%；
字号：80px；
}
琼博特伦p{
利润率最高：2%；
}
#钮扣{
利润率最高：10%；
边框：1px实心#FFFFFF；
}
.btn、.btn:悬停、.btn:活动、.btn:已访问{
背景色：#2D92FF！重要；
}
.btn xl{
填充：10px；
字体大小：20px；
边界半径：4px；
宽度：30%；
}   








阿凡达之地




$（文档）.ready（函数（）{
$（'.dropdown toggle'）.dropdown（）；
});

在标题中粘贴以下内容：

<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“下拉”代码$（文档）.ready（函数（）{ $（'.dropdown toggle'）.dropdown（）； }); 不确定为什么要使用jquery的1.12.4版本，因为当前版本是3.2.1，下面是链接
另外，我建议不要使用全宽度容器，而只使用div class=“container”，因为您的下拉列表一直都在左侧，除非单击时将其向右移动一点

第二个建议是让它也能做出反应。调整窗口大小时，应显示平板电脑和移动设备的汉堡包菜单
您的代码使用引导程序4 alpha 2。目前的版本是alpha6。在各种Bootstrap4Alpha版本中，对导航栏进行了一些工作。试试alpha 6，看看你是否还有问题？