Question

我试图在屏幕顶部设置两行导航菜单：

前一个将包含品牌，当分辨率足够小时，它还将包含特殊的引导按钮菜单，该菜单显示堆叠的折叠菜单项。
第二个将包含类别，只有在分辨率足够大时才可见。

这就是我想要实现的目标：

enter image description here 当分辨率足够大时

enter image description here 当分辨率很小时，第二个菜单行将折叠

我使用此代码但没有成功（第二行永远不会出现）：

<html>
    <head>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">Brand</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div class="container">
                <div class="nav-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Cat1</a></li>
                        <li><a href="#">Cat2</a></li>
                        <li><a href="#">Cat3</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <p>some text</p>
        </div>
    </body>
</html>

有什么想法吗？

Answer 1

我已经更新了你的html代码..在更改了一些引导程序样式后，你可能会得到你想要的......

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Cat1</a></li>
                <li><a href="#">Cat2</a></li>
                <li><a href="#">Cat3</a></li>
            </ul>
        </div>
    </div>
</div>

现在设置

    .navbar-header {
    float: none;
  }

现在，您将获得品牌名称以下的所有链接

在bootstrap中，我们可以使用媒体查询来设置何时在导航菜单中显示切换按钮。当浏览器大小为500像素或小于500像素时，我们可以看到切换按钮（默认情况下，当浏览器大小小于时，会出现切换按钮767 px）..

    @media (min-width: 500px) {
        .navbar-collapse {
            width: auto;
            border-top: 0;
            box-shadow: none;
        }

            .navbar-collapse.collapse {
                display: block !important;
                height: auto !important;
                padding-bottom: 0;
                overflow: visible !important;
            }

            .navbar-collapse.in {
                overflow-y: visible;
            }

        .navbar-fixed-top .navbar-collapse,
        .navbar-static-top .navbar-collapse,
        .navbar-fixed-bottom .navbar-collapse {
            padding-right: 0;
            padding-left: 0;
        }

        navbar-collapse.collapse {
            display: block!important;
        }

        .navbar-toggle {
            display: none;
        }

        .navbar-nav > li {
            float: left;
        }
    }

    @media (max-width: 500px) {

        .navbar-toggle {
            display: block;
        }

        .navbar-header {
            float: none;
        }

        .navbar-toggle {
            display: block!important;
        }

        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }

            .navbar-collapse.collapse {
                display: none!important;
            }

        .navbar-nav {
            float: none!important;
            margin: 7.5px -15px;
        }

            .navbar-nav > li {
                float: none;
            }

                .navbar-nav > li > a {
                    padding-top: 10px;
                    padding-bottom: 10px;
                }
    }

希望这可以帮助你!!!!!

我怎样才能有两行导航菜单，一行固定，一行可折叠？

1 个答案: