-4
preview Я не понимаю, почему выпадающее меню Bootstrap не работает !!! Я загрузил Bootstrap, чтобы разработать собственный дизайн. Карусель работает нормально, но когда вы нажимаете на раскрывающуюся кнопку, выпадающее меню прыгает влево !!! Если у вас есть файлы на вашем компьютере, любезно просмотрите его, потому что здесь слишком много кода для копирования, я просто скопировал свой html и часть bootstrap.min.css ... любой совет, пожалуйста ???Bootstrap v3.3.6 Dropdown не работает
.dropdown-menu {
\t position: absolute;
\t top: 100%;
\t left: 0;
\t z-index: 1000;
\t display: none;
\t float: left;
\t min-width: 160px;
\t padding: 5px 0;
\t margin: 2px 0 0;
\t font-size: 14px;
\t text-align: left;
\t list-style: none;
\t background-color: #fff;
\t -webkit-background-clip: padding-box;
\t background-clip: padding-box;
\t border: 1px solid #ccc;
\t border: 1px solid rgba(0,0,0,.15);
\t border-radius: 4px;
\t -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
\t box-shadow: 0 6px 12px rgba(0,0,0,.175)
}
.dropdown-menu.pull-right {
\t right: 0;
\t left: auto;
}
.dropdown-menu .divider {
\t height: 1px;
\t margin: 9px 0;
\t overflow: hidden;
\t background-color: #e5e5e5
}
.dropdown-menu>li>a {
\t display: block;
\t padding: 3px 20px;
\t clear: both;
\t font-weight: 400;
\t line-height: 1.42857143;
\t color: #333;
\t white-space: nowrap
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
\t color: #262626;
\t text-decoration: none;
\t background-color: #f5f5f5
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
\t color: #fff;
\t text-decoration: none;
\t background-color: #337ab7;
\t outline: 0
}
.dropdown-menu>.disabled>a, .dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
\t color: #777
}
.dropdown-menu>.disabled>a:focus, .dropdown-menu>.disabled>a:hover {
\t text-decoration: none;
\t cursor: not-allowed;
\t background-color: transparent;
\t background-image: none;
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.open>.dropdown-menu {
\t display: block;
\t position:relative;
}
.open>a {
\t outline: 0
}
.dropdown-menu-right {
\t right: 0;
\t left: auto
}
.dropdown-menu-left {
\t right: auto;
\t left: 0
}
.dropdown-header {
\t display: block;
\t padding: 3px 20px;
\t font-size: 12px;
\t line-height: 1.42857143;
\t color: #777;
\t white-space: nowrap
}
.dropdown-backdrop {
\t position: fixed;
\t top: 0;
\t right: 0;
\t bottom: 0;
\t left: 0;
\t z-index: 990
}
.pull-right>.dropdown-menu {
\t right: 0;
\t left: auto;
}
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
\t content: "";
\t border-top: 0;
\t border-bottom: 4px dashed;
\t border-bottom: 4px solid\9
}
.dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu {
\t top: auto;
\t bottom: 100%;
\t 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> </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 & 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
\t \t
})
</script>
</body>
</html>
Можете ли вы создать скрипт JS, который повторяет вашу ошибку? –
Поместите свою специальную разметку вашего приложения и CSS на [этот сайт] (http://www.bootply.com/new) и укажите ссылку в своем вопросе. –
'jQuery' включается дважды, один раз в заголовке, а затем в нижнем колонтитуле, должен включаться один раз – Shehary