Bootstrap v3.3.6下拉列表无法正常工作

时间：2016-05-23 15:45:49

标签： javascript jquery html css twitter-bootstrap

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>

2 个答案:

答案 0 :(得分：0)

我认为您的脚本标记有问题。尝试将CDN用于jQuery和Bootstrap。这个例子很好......

修改 如果需要覆盖CSS，可以使用相同的类名并在Bootstrap样式之后声明样式。例如：

引导样式 

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

自定义样式 

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

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

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

我建议不要更改Bootstrap文件。

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

答案 1 :(得分：0)

最好使用 CDN ：

来自{{3}}：

  

使用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尝试了你的代码并且它正在运行。

相关问题
最新问题