Bootstrap 3.x Navbar不折叠

Bootstrap 3 Navbar在全屏幕和小宽度的浏览器中正常扩展，在台式电脑和移动浏览器中缩小，但使用切换导航按钮时不会滑落...我试图在示例中使用相同的代码：http://getbootstrap.com/components/#navbar ...除了我自己的个人内容外，所有的CSS，js和代码结构都模仿了示例页面......任何twitter引导器都可以帮助我吗？祝福Bootstrap 3.x Navbar不折叠

URL测试页：http://www.autoexcelente.com/test/

<!DOCTYPE html> 
    <html lang="es"> 

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Autoexcelente - Test Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="Placeholder page to test user interface, includes, styles" /> 


    <link href="http://www.autoexcelente.com/assets/css/bootstrap.css" rel="stylesheet" /> 
    <link href="http://www.autoexcelente.com/assets/css/proprietary.css"   rel="stylesheet" /> 
    <link href="http://www.autoexcelente.com/assets/css/mytwitter.css"   rel="stylesheet" /> 

    <script src="http://www.autoexcelente.com/assets/js/bootstrap.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
    <script src="http://www.autoexcelente.com/assets/js/html5.js" type="text/javascript"></script> 
    <![endif]--> 

    <!-- Twitter           --> 
    <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> 
    <script src="https://api.twitter.com/1/statuses/user_timeline/autoexcelente.json?callback=twitterCallback2&count=4" type="text/javascript"></script> 

    <!-- Google Map           --> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script src="http://www.autoexcelente.com/assets/js/googlemap.js" type="text/javascript"></script> 

    <!-- Fav and touch icons --> 
    <link rel="shortcut icon" href="http://www.autoexcelente.com/assets/ico/favicon.ico" /> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.autoexcelente.com/assets/ico/apple-touch-icon-144-precomposed.png" /> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.autoexcelente.com/assets/ico/apple-touch-icon-114-precomposed.png" /> 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.autoexcelente.com/assets/ico/apple-touch-icon-72-precomposed.png" /> 
    <link rel="apple-touch-icon-precomposed" href="http://www.autoexcelente.com/assets/ico/apple-touch-icon-57-precomposed.png" /> 
    <script src="http://www.autoexcelente.com/assets/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script> 
    <link href="http://www.autoexcelente.com/assets/css/newsticker.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
     $(function() { 
      var _scroll = { 
      delay: 1000, 
      easing: 'linear', 
      items: 1, 
      duration: 0.07, 
      timeoutDuration: 0, 
      pauseOnHover: 'immediate' 
     }; 

     $('#ticker-2').carouFredSel({ 
      width: 1000, 
      align: true, 
      circular: true, 
      items: { 
       width: 'variable', 
       height: 35, 
       visible: 2 
      }, 
      scroll: _scroll 
     }); 

     $('.caroufredsel_wrapper').css('width', '100%'); 
     }); 
    </script> 

    </head> 
<body> 
<script type="text/javascript"> 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-42639445-1', 'autoexcelente.com'); 
    ga('send', 'pageview'); 

</script><div id="fb-root"></div> 
<script type="text/javascript">(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://www.autoexcelente.com/es/"> 
      <div class="brand_image" rel="tooltip" title="Auto Excelente - Su concesionario de autos de confianza en el coraz&oacute;n de la Avenida 65 de Infanter&iacute;a, San Ju&aacute;n y Carolina, Puerto Rico. Tel&eacute;fono (787)750-1400/(787)550-6991"> 
      </div> 
     </a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a href="http://www.autoexcelente.com/inventario/" rel="tooltip" title="Inventario de Autos Nuevos y Usados"> 
        Inventario 
       </a> 
      </li> 
      <li> 
       <a href="http://www.autoexcelente.com/servicio_automotriz/" rel="tooltip" title="Reparaci&oacute;n y Servicio Automotriz"> 
        Servicio Automotriz 
       </a> 
      </li> 
      <li> 
       <a href="http://www.autoexcelente.com/contactenos/" rel="tooltip" title="Cont&aacute;ctenos y vis&iacute;tenos en el coraz&oacute;n de la 65 
de Infanter&iacute;a, Carolina y San Ju&aacute;n, Puerto Rico."> 
        Cont&aacute;ctenos 
       </a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <div class="fb-like" data-href="https://www.facebook.com/#!/pages/Autoexcelente/455026431234764" data-width="200" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>   </li> 
      <li> 
       <map name="map_buttons"> 
        <area shape="rect" 
         coords="31,8,63,40" href="mailto:[email protected]" 
         alt="Correo Electr&oacute;nico: [email protected]" 
         rel="tooltip" title="Correo Electr&oacute;nico: [email protected]"> 
        <area shape="rect" 
         coords="72,8,104,40" href="http://www.autoexcelente.com/" 
         alt="Navigate AutoExcelente in English!" 
         rel="tooltip" title="Navigate AutoExcelente in English!"> 
        <area shape="rect" 
         coords="113,8,145,40" href="http://www.autoexcelente.com/test/" 
         alt="&iexcl;Navega AutoExcelente en Espa&ntilde;ol!" 
         rel="tooltip" title="&iexcl;Navega AutoExcelente en Espa&ntilde;ol!"> 
        <area shape="rect" 
         coords="31,47,63,80" href="http://www.facebook.com/pages/Autoexcelente/455026431234764" 
         alt="&iexcl;Visite nuestra p&aacute;gina en Facebook!" 
         rel="tooltip" title="&iexcl;Visite nuestra p&aacute;gina en Facebook!"> 
        <area shape="rect" 
         coords="72,47,104,80" href="https://twitter.com/autoexcelente" 
         alt="&iexcl;Ent&eacute;rese los ultimos tweets de Autoexcelente!" 
         rel="tooltip" title="&iexcl;Ent&eacute;rese los ultimos tweets de Autoexcelente!"> 
        <area shape="rect" 
         coords="113,47,145,80" href="http://www.youtube.com/user/Autoexcelente?feature=watch" 
         alt="&iexcl;Hechese un vistazo a nuestro canal en YouTube!" 
         rel="tooltip" title="&iexcl;Hechese un vistazo a nuestro canal en YouTube!"> 
       </map> 
       <img src="http://www.autoexcelente.com/assets/img/ui_contact_ autoexcelente.png" width="180" height="89" border="0" usemap="#map_buttons" alt="linea%20cliente%20del%20carro%20barato%20(787)750-1400%[email protected]" /> 
      </li> 
     </ul> 
    </div> 
</nav> 
<div class="container"> 
<hr/> 

<div id="wrapper"> 
    <div> 
     <dl id="ticker-2"> 
      <dt><a class="tel_dt" href="tel:7877501400">(787) 750 - 1400</a></dt> 
       <dd class="outer_dd"> 
        <a href="http://www.autoexcelente.com/inventario/hyundai/accent-407/2013_hyundai_accent-132/">2013 Hyundai Accent </a> 
        <span class="middle_dd"><a href="http://www.autoexcelente.com/inventario/ford/freestar-1061/2006_ford_freestar-51/">2006 Ford Freestar </a></span> 
        <a href="http://www.autoexcelente.com/inventario/volkswagen/beetle-874/2006_volkswagen_beetle-163/">2006 Volkswagen Beetle </a> 
       </dd> 
      <dt><a class="tel_dt" href="tel:7879880440">(787) 988 - 0440</a></dt> 
       <dd class="outer_dd"> 
        <a href="http://www.autoexcelente.com/inventario/toyota/rav+4-838/2006_toyota_rav+4-10/">2006 Toyota Rav 4 </a> 
        <span class="middle_dd"><a href="http://www.autoexcelente.com/inventario/ford/freestyle-320/2005_ford_freestyle-52/">2005 Ford Freestyle </a></span> 
        <a href="http://www.autoexcelente.com/inventario/mitsubishi/lancer-625/2010_mitsubishi_lancer-121/">2010 Mitsubishi Lancer </a> 
       </dd> 
      <dt><a class="tel_dt" href="tel:7877174202">(787) 717 - 4202</a></dt> 
       <dd class="outer_dd"> 
        <a href="http://www.autoexcelente.com/inventario/dodge/grand+caravan-251/2009_dodge_grand+caravan-99/">2009 Dodge Grand Caravan </a> 
        <span class="middle_dd"><a href="http://www.autoexcelente.com/inventario/mitsubishi/eclipse-619/2011_mitsubishi_eclipse-110/">2011 Mitsubishi Eclipse </a></span> 
        <a href="http://www.autoexcelente.com/inventario/nissan/versa-669/2012_nissan_versa-150/">2012 Nissan Versa </a> 
       </dd> 
      <dt><a class="tel_dt" href="tel:7875506991">(787) 550 - 6991</a></dt> 
       <dd class="outer_dd"> 
        <a href="http://www.autoexcelente.com/inventario/bmw/3+series-69/2004_bmw_3+series-62/">2004 BMW 3 Series </a> 
        <span class="middle_dd"><a href="http://www.autoexcelente.com/inventario/ford/mustang-327/2007_ford_mustang-143/">2007 Ford Mustang </a></span> 
        <a href="http://www.autoexcelente.com/inventario/mazda/5-547/2007_mazda_5-/">2007 Mazda 5 </a> 
       </dd> 
      </dl> 
     </div> 
    </div> 

<br/><br/>  <footer> 
      <p>&copy; <a href="http://www.autoexcelente.com/es/" >Autoexcelente 2014</a></p> 
      <p> 
       <a href="." >Sobre Nosotros</a> - 
       <a href="http://www.autoexcelente.com/terminos_de_servicio/" >Terminos de Servicio</a> - 
       <a href="http://www.autoexcelente.com/poliza_de_privacidad/" >Poliza de Privacidad</a> - 
       <a href="http://www.autoexcelente.com/mapa/" >Mapa de el Lugar</a> 
      </p> 
     </footer> 
</div> 
</body> 
</html>

来源

2014-01-13 plasmalasgun

您必须包括jQuery的你包括bootstrap.js之前。所以不是

<script src="http://www.autoexcelente.com/assets/js/bootstrap.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

你应该尝试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://www.autoexcelente.com/assets/js/bootstrap.js" type="text/javascript"></script>

顺便说一句。：您也应该检查开发者工具的输出（如铬F12），并检查错误和资源，无法加载。这样你可能会发现你的自己出了什么问题;）但是还有一些其他的问题。检查出来:)

来源

2014-01-13 08:27:27 nozzleman

在你页面，JS检查元素抛出错误：

Error: Bootstrap requires jQuery

你有不正确顺序，包括文件。

首先包括jQuery的，那么，做引导，改变这种：

<script src="http://www.autoexcelente.com/assets/js/bootstrap.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

要这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://www.autoexcelente.com/assets/js/bootstrap.js" type="text/javascript"></script>

来源

2014-01-13 08:41:16 NoobEditor

Bootstrap 3.x Navbar不折叠

回答

相关问题