Question

在codepen.io中工作 - 单击时，Bootstrap下拉菜单不会向下扩展。

HTML：

＆＃13;

<nav class="navbar navbar-toggleable-md navbar-   light bg-faded">
   <div class="container-fluid">
      <button class="navbar-toggler hidden-lg-  
      up" style="float:right" type="button" 
      data-toggle="collapse" data-
      target="#navbarNavDropdown" aria-
      controls="navbarNavDropdown" aria-
      expanded="false" aria-label="Toggle 
      navigation">
        <span class="navbar-toggler-icon">
        </span>
      </button>
      <a class="navbar-brand" href="#"><img 
   src="https://s21.postimg.org/7jyged8c7/logo_words_transparent.png" alt="logo" width= "200px" height= "80px"></a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Our Story</a>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com" data-toggle= "dropdown">
    Web Sites
    <span class="caret"></span></a>
   <ul class="dropdown-menu">
    <li><a href="#">Business</a></li>
    <li><a href="#">e-Commerce</a></li>
    <li><a href="#">Web Applications</a></li>
  </ul>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com">
    Social Media
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Social Marketing</a></li>
    <li><a class="dropdown-item" href="#">Content Management</a></li>
    <li><a class="dropdown-item" href="#">Communities and Influencers</a></li>
    <li><a class="dropdown-item" href="#">Social Intelligence</a></li>
  </ul>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com">
    Digital Marketing
  <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">SEO</a></li>
    <li><a class="dropdown-item" href="#">AdWords</a></li>
    <li><a class="dropdown-item" href="#">Email Marketing</a></li>
  </ul>
</li>
  <li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com">
    User Experience
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Interface Development</a></li>
    <li><a class="dropdown-item" href="#">User Analysis</a></li>
  </ul>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com">
    Graphic Design
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Logo Design</a></li>
    <li><a class="dropdown-item" href="#">Printed Media</a></li>
    <li><a class="dropdown-item" href="#">Printing Support</a></li>
  </ul>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="http://example.com">
    Training
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">DIY Wordpress</a></li>
    <li><a class="dropdown-item" href="#">DIY Social Marketing</a></li>
    <li><a class="dropdown-item" href="#">DIY SEO</a></li>
  </ul>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
  <a class="nav-link" href="#">Contact</a>
</li>
</ul>
  </div>
</nav>

＆＃13;

enter link description here

我已经看到其他问题，请讨论插入脚本的顺序，但我不确定如何使用codepen.io执行此操作。

感谢您的帮助。

Answer 1

你在codepen视图中犯了一些愚蠢的错误。 bootstrap对jquery有很多依赖。
您先加载bootstrap.js然后加jquery.js，但应先jquery.js然后加bootstrap.js。<登记/> 您可以在下面查看正确的订单：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Answer 2

如果没有像下面那样添加CDN，您首先需要在代码中添加CDN

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

您使用的第二个<a></a>下拉列表，请勿添加href =“any link”

感谢您的帮助。我插入了您建议的标签，但菜单项向上移动与徽标重叠，删除href =“”后菜单项仍无法正常工作。如果有帮助，我正在使用CODEPEN.IO

Bootstrap Navbar下拉菜单在Codepen.io中没有下降

2 个答案: