文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Bootstrap 3.x导航栏未折叠

问Bootstrap 3.x导航栏未折叠
EN

Stack Overflow用户
提问于 2014-01-13 16:23:45
回答 2查看 352关注 0票数 0

Bootstrap 3导航栏在全屏和桌面pc和移动浏览器中的小宽度浏览器上可以正确扩展，但是当使用切换导航按钮时，它不会滑下...我尝试在示例中使用相同的代码：http://getbootstrap.com/components/#navbar ...除了我个人的包含，所有的css、js和代码结构都模仿了示例页面……twitter上有没有人能帮我一把？祝福

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

代码语言：javascript
复制
    <!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:autoexcelentepr@gmail.com"
                        alt="Correo Electr&oacute;nico: autoexcelentepr@gmail.com"
                        rel="tooltip" title="Correo Electr&oacute;nico: autoexcelentepr@gmail.com">
                    <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%20autoexcelentepr@gmail.com" />
            </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>
css
twitter-bootstrap
javascript
jquery
html
EN

回答 2

Stack Overflow用户

发布于 2014-01-13 16:27:28

在包含bootstrap.js之前，必须包含jquery。因此，不是

代码语言：javascript
复制
    <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>

你应该试试

代码语言：javascript
复制
    <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>

顺便说一句:您还应该检查开发人员工具的输出(例如，chrome F12)，并检查错误和无法加载的资源。通过这种方式，您可能会自己发现哪里出了问题;)不过，还有一些其他问题。查看它:)

票数 1
EN

Stack Overflow用户

发布于 2014-01-13 16:41:17

在you Page上，JS inspect元素抛出错误：

错误:引导需要jQuery

包含文件的顺序不正确。

首先包含jquery，然后执行bootstrap，更改以下内容：

代码语言：javascript
复制
<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>

要这样做：

代码语言：javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/21086680

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档