问引导下拉菜单，而不是下拉菜单？
EN

Stack Overflow用户

提问于 2017-06-03 19:56:36

回答 1查看 1.5K关注 0票数 0

引导选项下拉菜单不显示。尝试移动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>

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-05 02:37:57

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

从body部分删除所有脚本行，包括jquery“下拉”代码。$('.dropdown-toggle').dropdown(); $(Document).ready(函数(){ started.asp })；不确定为什么要使用1.12.4版本的jquery，因为当前版本是3.2.1，下面是链接started.asp

另外，我建议不要使用全宽度容器，而只使用div class=“容器”，因为下拉列表一直在向左移动，除非单击它时会将其移到右侧。

第二项建议是使它也能作出反应。在调整窗口大小时，应该显示平板电脑和移动设备的汉堡包菜单。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44348026

复制

相似问题

问引导下拉菜单，而不是下拉菜单？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导下拉菜单，而不是下拉菜单？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导下拉菜单，而不是下拉菜单？
EN