Bootstrap 3 导航栏 - 无法正确折叠

2024-03-09

导航栏曾经正常工作,但我做了一些更改,它不再工作。当我将窗口缩小时,会显示切换方块,但是当我单击它时 - 什么也没有发生。

Note:导航栏在全屏下工作正常 - 它只是在小窗口中,当我单击切换按钮时 - 下拉菜单不会出现

想知道是否有人知道如何解决它。

这是我的标题代码:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <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="#">CHRONOS LOGO</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">CONTACT</a></li>
                <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">SOCIAL<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="divider"></li>
                        <li><a href="#">Google+</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Facebook</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Twitter</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

FOOTER:

                    <button type="submit" name="submit" id="submit"
                            class="btn btn-primary btn-lg">
                        Submit
                    </button>
                </form>
            </div>
            <?php } ?>
        </div>
        <div id="footer">
            <div class="container">
                <p class="text-muted">Place sticky footer content here.</p>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="regform/js/jquery.validate.js"></script>
        <script src="regform/script.js"></script>
        <script>
            addEventListener('load', prettyPrint, false);
            $(document).ready(function() {
                $('pre').addClass('prettyprint linenums');
            });
        </script>
    </body>
</html>

您的值有误data-target属性;它应该是:

<button 
    type="button" 
    class="navbar-toggle" 
    data-toggle="collapse" 
    data-target=".navbar-collapse"> <!-- You had ID from the docs example -->
</button>

http://jsfiddle.net/fZTgH/1/ http://jsfiddle.net/fZTgH/1/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 3 导航栏 - 无法正确折叠 的相关文章

  • 如何纠正 Firefox 中侧边栏的固定定位?

    我的网页中有以下 HTML 我想将侧边栏固定在左侧 它在 Chrome 中工作正常 但 Firfox 没有将侧边栏显示为固定 div div h1 Heading h1 div div
  • 使用 R 从 Microsoft Outlook 发送电子邮件时的 Html 表输出格式

    我正在尝试使用以下方法将数据框转换为 html 表htmlTable打包 然后使用 Microsoft Outlook 作为电子邮件客户端发送电子邮件RDCOMClient通过附加 html 表作为电子邮件正文来进行打包 我是 HTML 编
  • 已弃用的代码: vs style="font-weight:bold;"

    我一直用 b 标记为粗体 因为这是我很久以前就被教做的方式 但现在我的 IDE 总是告诉我 b 已弃用并使用 css 样式 假设他们希望我使用 div style font weight bold Bold Text div 我的 IDE
  • 弹性项目的等高子项

    我在创建 Flexbox 响应式网格时遇到问题 希望有人能给我指出正确的方向 我想要所有的 blockdiv 的高度相等 并且 bottomdiv 绝对定位到底部 这实际上在当前的解决方案中有效 但是当 的时候h2标题太长 达到了2行 我想
  • 如何在两个 960.gs 框之间添加垂直线?

    我正在使用 960 gs 网格系统进行设计 在两个盒子之间添加一条细细的分隔垂直线的最佳方法是什么 宽度和颜色应该是可调的 我的计划是定义几个具有绝对位置和背景颜色的 div 类 每个可能的位置对应一个 并使用 JQuery 确保它与周围的
  • 将 CSS 导入 HTML 不起作用

    我正在尝试将 CSS 文件 import 导入 HTML 但它不起作用 我确实尝试过链接路径 但它也不起作用 但这种格式似乎工作为 http U5 L ttJS http 127 0 0 1 54149 assets pages U5 JS
  • 将 PhotoSwipe 配置为不使用整个窗口?

    我目前正在尝试使用构建移动图片库照片滑动 http photoswipe com 我已经能够让它工作了 但有一个小问题 当我 单击照片缩略图 实际照片总是占据整个 视口 当您在移动设备上查看图库时 这是可以的 但是 如果您的视口是计算机屏幕
  • Firefox 中的相对位置[重复]

    这个问题在这里已经有答案了 可能的重复 Firefox 是否支持表格元素上的position relative https stackoverflow com questions 5148041 does firefox support p
  • 在移动浏览器中隐藏导航栏

    我正在使用 Twitter Bootstrap 制作一个移动响应网站 当在移动设备上查看网站时 我想完全隐藏顶部导航栏 有人知道如何做到这一点吗 最简单的方法是使用响应式实用程序类 hidden phone and hidden table
  • 当外部 div 动画时,Div 内的 Div 隐藏

    我有一个高度为 0 的父 div 和一个子 div 但在顶部使用 z index 我想要这个子 div 在单击时扩展父 div 的高度 效果确实很好 但是内部 div 消失在与父 div 平行的其他 div 后面 当动画完成时 它会再次显示
  • 双向 CSS 高度动画

    keyframes mgm from max height 250px to max height 0px mgm width 180px border 1px solid black padding 10px animation mgm
  • 为什么我的 CSS3 媒体查询无法在移动设备上运行?

    在 styles css 中 我使用媒体查询 两者都使用以下变体 Normal CSS styles media only screen and max width 767px Mobile styles go here 当我缩小窗口时 网
  • LessCSS 中的 @media 和 @font-face 支持

    你好 有谁知道如何使用 LessCSS 进行媒体查询吗 media screen and max width 600px container width 480px 给我以下错误 Syntax Error on line 23 expect
  • 使用 CSS 首字下沉

    我怎样才能使每个段落的第一个字符看起来像这样 我更喜欢只使用 CSS p first letter float left font size 5em line height 0 5em padding bottom 0 05em paddi
  • 在 Safari 中转换变换和大小 (9.1)

    我试图在元素上实现平滑过渡transform translate 和一些其他属性 是的 我读过有关匹配供应商前缀的内容 它在 Chrome 和 FF 中工作正常 但在 Safari 中它不能平滑地动画转换 在最后跳转 在应用翻译之前 它似乎
  • Twitter Bootstrap 的 Tab 插件中的“data-api”是什么意思

    有一段代码如 TAB DATA API function body on click tab data api data toggle tab data toggle pill function e e preventDefault thi
  • CSS:变换:翻译(-50%,-50%)使文本模糊[重复]

    这个问题在这里已经有答案了 我想将我的div我使用这种方法 但它使我的文本在div blurry div top 50 left 50 webkit transform translate 50 50 transform translate
  • 避免使用 Grunt cssmin 任务来删除重复条目

    在我的 Gruntfile 中 我使用 cssmin grunt contrib cssmin 任务 就像是 cssmin css src dist styles css dest dist styles min css 问题是 style
  • 当我将 HTML 标签设置为 100% 高度时,我的内容消失了

    我有一个垂直布局 我想保持页面居中 一列保持固定在页面上 而另一列应根据内容滚动 并且有一些绝对的装饰性浮动 div 我希望滚动列垂直显示 100 即使内容不需要高度 但我似乎无法让它工作 我已将 html 标签和 body 标签以及所有必
  • 关闭网站的 IE 8 兼容模式

    我的公司使用IE8作为默认浏览器 并且默认为所有内联网站点设置兼容模式 我正在构建一个在关闭兼容模式时可以工作的 Intranet 站点 我正在使用 Reset css 和几个开源 JavaScript 程序 例如数据表 我想做的是强制关闭

随机推荐