Bootstrap v3.3.6 下拉菜单不起作用答案

【问题标题】：Bootstrap v3.3.6 Dropdown not workingBootstrap v3.3.6 下拉菜单不起作用
【发布时间】：2016-05-23 15:45:49
【问题描述】：

preview我不明白为什么 Bootstrap 下拉菜单不起作用！！！我下载了 Bootstrap 来开发定制设计。轮播工作正常，但是当您单击下拉按钮时，下拉菜单会跳到左侧！！！如果您的计算机上有文件，请查看它，因为这里复制的代码太多，我只是复制了我的 html 和 bootstrap.min.css 的一部分……请给点建议？？？

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175)
}
.dropdown-menu.pull-right {
	right: 0;
	left: auto;
}
.dropdown-menu .divider {
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5
}
.dropdown-menu>li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
	color: #262626;
	text-decoration: none;
	background-color: #f5f5f5
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #337ab7;
	outline: 0
}
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
	color: #777
}
.dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
	text-decoration: none;
	cursor: not-allowed;
	background-color: transparent;
	background-image: none;
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.open>.dropdown-menu {
	display: block;
	position:relative;
}
.open>a {
	outline: 0
}
.dropdown-menu-right {
	right: 0;
	left: auto
}
.dropdown-menu-left {
	right: auto;
	left: 0
}
.dropdown-header {
	display: block;
	padding: 3px 20px;
	font-size: 12px;
	line-height: 1.42857143;
	color: #777;
	white-space: nowrap
}
.dropdown-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 990
}
.pull-right>.dropdown-menu {
	right: 0;
	left: auto;

}
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
	content: "";
	border-top: 0;
	border-bottom: 4px dashed;
	border-bottom: 4px solid\9
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
	top: auto;
	bottom: 100%;
	margin-bottom: 2px
}

<!doctype html>

<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="footer.css" rel="stylesheet" type="text/css">
<link href="css/ancor.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script type="text/javascript" src="nav.js"></script>

<body>


 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>


<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide"> 
  <!-- Indicators -->
  <ol class="carousel-indicators-hp">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>
  
  <!-- Wrapper for Slides -->
  <div class="carousel-inner">
    <div class="item active"> 
      <!-- Set the first background image using inline CSS below. -->
      <div class="fill" style="background-image:url(images/home/canvas_hp_1600x900_New_Giulietta_v1_update.jpg);"></div>
      <div class="carousel-caption">
        
      </div>
    </div>
    <div class="item"> 
      <!-- Set the second background image using inline CSS below. -->
      <div class="fill" style="background-image:url(images/model/giulietta/canvas-2_modelpage-newgiulietta.jpg);"></div>
      <div class="carousel-caption">
        <h2></h2>
      </div>
    </div>
  </div>
  
  <!-- Controls --> 
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div>
  
<div id="myCarousel2" class="carousel slide"> 
  <!-- Indicators -->
  <ol class="carousel-indicators" style="display:none;">
    <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
  </ol>
  
  <!-- Wrapper for Slides -->
  <div class="carousel-inner">
    <div class="item active"> 
      <!-- Set the first background image using inline CSS below. -->
      <div class="fill" style="background-image:url(images/model/giulietta/overview_modelapage-newgiulietta.jpg);"></div>
      <div class="carousel-caption">
        <div class=" model__content left">
          <h2 class="content__title"> OVERVIEW </h2>
          <div class="content__text"> <span class="animated-line"></span>
            <p>REDEFINING STYLE</p>
          </div>
          <div class="content__descr">
            <p>With new sporty exterior details, enhanced onboard experience, new interior touches and extended engine range: The Alfa Giulietta has once again reinvented itself.<br>
              Even more sporty. Even more Alfa Romeo.</p>
            <p>&nbsp;</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="myCarousel3" class="carousel slide"> 
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel3" data-slide-to="0" class="active">style</li>
    <li data-target="#myCarousel3" data-slide-to="1" >exteriors</li>
    <li data-target="#myCarousel3" data-slide-to="2" >interiors</li>
    <li class="last" data-target="#myCarousel3" data-slide-to="3" >distinctive</li>
  </ol>
  
  <!-- Wrapper for Slides -->
  <div class="carousel-inner">
    <div class="item active"> 
      <!-- Set the first background image using inline CSS below. -->
      <div class="fill" style="background-image:url(images/model/giulietta/style_modelpage-giulietta.jpg); background-position:bottom;"></div>
      <div class="carousel-caption">
        <div class=" model__content left">
          <h2 class="content__title"> ENHANCED SPORTS STYLING </h2>
          <div class="content__text"> <span class="animated-line"></span>
            <p>DESIGN &amp; PERFORMANCE</p>
          </div>
          <div class="content__descr">
            <p>The New Alfa Giulietta with its timeless elegance provides authentic Alfa Romeo driving pleasure. Why not discover this Italian masterpiece for yourself?</p>
          </div>
        </div>
      </div>
    </div>
    <div class="item"> 
      <!-- Set the first background image using inline CSS below. -->
      <div class="fill" style="background-image:url(images/model/giulietta/exteriors_modelpage-newgiulietta.jpg); background-position:bottom center;"></div>
      <div class="carousel-caption">
        <div class=" model__content left">
          <h2 class="content__title"> EXTERIORS </h2>
          <div class="content__text"> <span class="animated-line"></span>
            <p>ALFA ROMEO'S DISTINCTIVE STYLING</p>
          </div>
          <div class="content__descr">
            <p>From first glance, the iconic grille reflects true Alfa Romeo DNA. Every innovation of the New Alfa Giulietta highlights an Italian passion for performance and style, such as the carbon effect headlights, oversized tail pipes, and range of distinctive alloy wheels to personalise your Alfa Romeo.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="item"> 
      <!-- Set the first background image using inline CSS below. -->
      <div class="fill" style="background-image:url(images/model/giulietta/interiors_modelpage-newgiulietta.jpg); background-position:top center;"></div>
      <div class="carousel-caption">
        <div class=" model__content color--light left">
          <h2 class="content__title"> INTERIORS </h2>
          <div class="content__text"> <span class="animated-line"></span>
            <p>IGNITE YOUR PASSION</p>
          </div>
          <div class="content__descr">
            <p>The interiors of the New Alfa Giulietta have been crafted with high quality materials such as the new Italian design upholstery and matte black grain dashboard. Refined elegance in true Alfa Romeo style.
              New Alfa Giulietta. Pure Sportiness. Pure Emotion. Pure Alfa Romeo.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="item"> 
      <!-- Set the first background image using inline CSS below. -->
      <div class="fill" style="background-image:url(images/model/giulietta/uniqueness_modelpage-newgiulietta.jpg);"></div>
      <div class="carousel-caption">
        <div class=" model__content left">
          <h2 class="content__title"> DISTINCTIVE </h2>
          <div class="content__text"> <span class="animated-line"></span>
            <p>DESIGN & PERFORMANCE</p>
          </div>
          <div class="content__descr">
            <p>The New Alfa Giulietta with its timeless elegance provides authentic Alfa Romeo driving pleasure. Why not discover this Italian masterpiece for yourself?</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

<!-- Script to Activate the Carousel --> 
<script>
    $('.carousel').carousel({
        interval: false //changes the speed
		
    })
     </script> 

</body>
</html>

【问题讨论】：

你能做一个 JS 小提琴来复制你的错误吗？
将您的应用程序特定标记和 CSS 放入 this site 并在您的问题中提供链接。
jQuery 包含两次，一次在页眉中，然后在页脚中，应该包含一次

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

最好使用CDN：

来自w3schools：

使用 Bootstrap CDN 的一个优势：许多用户已经拥有访问另一个站点时从 MaxCDN 下载了 Bootstrap。作为一个结果，当他们访问您的网站时，它将从缓存中加载，这导致更快的加载时间。此外，大多数 CDN 将确保一旦用户向它请求文件，它将由服务器提供离它们最近，这也会导致更快的加载时间。

您可以用这些 CDN 替换您下载的引导文件链接：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

我在这些 CDN 上尝试了您的代码，并且可以正常工作。

【讨论】：

我下载了这些文件，因为我需要自定义它们，如果我用链接替换它们，它将是远程的，我无法编辑它们
@SandyGubran 哦！可能是您删除了一些行，这可能是下拉菜单不起作用的原因。您需要自定义所有三个文件吗？
@SandyGubran 不要编辑那些 bootstrap / jquery 文件，而是使用您自己单独的 CSS 文件。你可以写CSS 和!important 选项，告诉浏览器重视这种风格。
NO :) 我只是在 css 文件中编辑了一些行，bg 颜色或字体大小等我确定我没有删除任何东西

【解决方案2】：

我认为您的脚本标签有问题。尝试使用 jQuery 和 Bootstrap 的 CDN。这个例子运行良好...

编辑： 如果您需要覆盖 CSS，您可以通过使用相同的类名并在 Bootstrap 样式之后声明样式来实现。示例：

引导样式

.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}

自定义样式

.dropdown-menu.pull-right {
    right: 20px;
}

如果您需要增加定位，请使用!important

.dropdown-menu.pull-right {
    right: 20px !important;
}

我不建议更改引导文件。

<html>
<body>

  <!-- Bootstrap Core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</body>
</html>

【讨论】：

好的，我做到了.. 但是当您尝试添加轮播时，它将无法正常工作！
当我删除上面的 CSS 时，它可以工作。当我添加它时，我在你的图片中得到了错误。如果您需要自定义 CSS，请在 Bootstrap 样式下方添加一个新的 CSS 文件并覆盖它们。
@SandyGubran 我编辑了答案以显示 CSS 覆盖。