Bootstrap suspensa v3.3.6 não funciona

votos
-4

visualização eu não estou entendendo por que o Bootstrap menu drop-down não está funcionando !!! Eu baixei Bootstrap para desenvolver um design personalizado. O carrossel está funcionando bem, mas quando você clica no botão suspenso o menu suspenso salta à esquerda !!! Se você tem os arquivos no seu computador gentilmente revê-lo porque é muito código para copiar aqui, eu simplesmente copiou o meu html e parte do bootstrap.min.css ... algum conselho por favor ???

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

Publicado 23/05/2016 em 14:45
usuário
Em outras línguas...                            


2 respostas

votos
0

Eu acho que há algo de errado com as suas etiquetas de script. Tente usar o CDN para jQuery e Bootstrap. Este exemplo funciona bem ...

Edit: Se você precisa substituir CSS você pode fazer isso usando o mesmo nome da classe e declarando os estilos após a estilos Bootstrap. Exemplo:

estilo Bootstrap

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

estilo personalizado

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

Se você precisa aumentar o uso alvejando !important

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

Eu não recomendo mudar os arquivos Bootstrap em tudo.

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

Respondeu 23/05/2016 em 15:05
fonte usuário

votos
0

É melhor usar CDNs :

De w3schools :

Uma vantagem de usar o Bootstrap CDN: Muitos usuários já baixaram Bootstrap de MaxCDN ao visitar um outro local. Como resultado, ele será carregado a partir do cache quando eles visitam seu site, o que leva a tempo de carregamento mais rápido. Além disso, a maioria CDN irá certificar-se que uma vez que um usuário solicita um arquivo a partir dele, será servido a partir do servidor mais próximo a eles, que também leva a tempo de carregamento mais rápido.

Você pode substituir suas ligações arquivo de inicialização baixado com estes CDNs:

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

Eu tentei o seu código com estas CDNs e ele estava funcionando.

Respondeu 23/05/2016 em 15:08
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more