html - 我需要知道如何更新 bootstrap 汉堡菜单中的 UI

标签 html css twitter-bootstrap menu media-queries

我在寻找将汉堡包下拉列表从向下滑动更改为向右滑动并使用相同元素的方法时遇到问题。我已经看到示例,他们在断点处将一个菜单换成另一个菜单,但我只想使用一个菜单来实现这两个菜单。我这里有基本代码。

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Bootstrap theme</a>

        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>

                </li>
                <li><a href="#about">About</a>

                </li>
                <li><a href="#contact">Contact</a>

                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>

                        </li>
                        <li><a href="#">Another action</a>

                        </li>
                        <li><a href="#">Something else here</a>

                        </li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a>

                        </li>
                        <li><a href="#">One more separated link</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>

我正在到处寻找解决方案。我不能交换菜单的原因是因为菜单项必须定期更新,我不想在两个空间中进行。

https://fiddle.jshell.net/qw93eLy6/2/

最佳答案

我在我的本地检查它工作正常请检查它,你应该包括这个头文件。 如果您有 jquery、css 文件,则包含该文件

 <head>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
</head>


<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">Bootstrap theme <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>

                </li>
                <li><a href="#about">About</a>

                </li>
                <li><a href="#contact">Contact</a>

                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>

                        </li>
                        <li><a href="#">Another action</a>

                        </li>
                        <li><a href="#">Something else here</a>

                        </li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a>

                        </li>
                        <li><a href="#">One more separated link</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>

关于html - 我需要知道如何更新 bootstrap 汉堡菜单中的 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39271265/

相关文章:

javascript - 如何在html中彼此相邻显示两个单选按钮?

php - 正则表达式匹配 1 个 HTML 文件中的 2 个 html 标签

javascript - 在函数中作为参数传递时无法设置 css 样式

javascript - Bootstrap 推荐轮播

javascript - CSS或jQuery悬停效果增加固定框显示绝对位置放大版

php - 在wordpress上将标题与缩略图分开

jquery - 我们可以像 CSS3 一样在 jQuery 中使用类转换吗?

css - 什么属性定义了 css 中文本选择的颜色?

javascript - onclick 返回函数未定义

html - 无法在 Bootstrap 上创建自定义按钮