Bootstrap 4 将两个导航栏折叠成一个切换按钮 [英] Bootstrap 4 collapsing two navbars into one toggle button

查看：22
本文介绍了Bootstrap 4 将两个导航栏折叠成一个切换按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在尝试应用这个 Bootstrap4.0 - 两个 NavBar 折叠成一个切换 回答了我的问题，但经过一些努力后仍未解决.

我正在尝试将两个导航栏的内容合并为一个切换按钮.

这两个问题是一旦折叠为 sm 我的切换按钮不显示其内容(来自任一目标)，并且在 sm 宽度下，我的下部导航栏无法保持其高度.我的代码:

 <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAWJSAGiXiA"crossorigin="匿名"><title>你好，世界！</title><身体><nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top"><button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target1, #collapse_target2"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="collapse_target1"><ul class="navbar-nav mx-auto"><li class="nav-item"><a class="nav-link" href="#">链接 1</a><li class="nav-item"><a class="nav-link" href="#">链接 2</a><a class="navbar-brand"><img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em"><span>首页</span></a><li class="nav-item"><a class="nav-link" href="#">链接 3</a><li class="nav-item"><a class="nav-link" href="#">链接 4</a>

</nav><nav class="navbar navbar-expand-sm navbar-light bg-light"><div class="collapse navbar-collapse" id="collapse_target2"><ul class="navbar-nav mx-auto"><li class="nav-item"><a class="nav-link" href="#">链接 5</a><li class="nav-item"><a class="nav-link" href="#">链接 6</a><li class="nav-item"><a class="nav-link" href="#">链接 7</a>

</nav><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7Xfakvfakvskcrossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5+6"7crossorigin="anonymous"></script>

解决方案

使用单个类来定位导航栏的数据，而不是使用不同的 id.例如，给两个 navbar-collapse 元素都指定 navbars 类，然后目标是 data-target=".navbars".

演示:https://www.codeply.com/go/PvHpcBNuAp

另外，我不知道你为什么在第一个导航栏上使用 sticky-top.您应该删除它，否则滚动时第二个导航栏将在移动设备上的第一个导航栏下方滑动. 如果您希望两个导航栏都固定在顶部，看到这个答案.

</nav><nav class="navbar navbar-expand-sm navbar-light bg-light"><div class="collapse navbar-collapse navbars" id="collapse_target2"><ul class="navbar-nav mx-auto"><li class="nav-item"><a class="nav-link" href="#">链接 5</a><li class="nav-item"><a class="nav-link" href="#">链接 6</a><li class="nav-item"><a class="nav-link" href="#">链接 7</a>

</nav>

<小时>

另见:2行引导4导航栏>

I've been trying to apply this Bootstrap 4.0 - Two NavBars that collapse into one toggle answer to my issue but am not resolving it after some effort.

I'm trying to have the content of both navbars collapse into one toggle button.

The two issues are once collapsed to sm my toggle button doesn't display its content (from either target), and that at sm width my lower navbar does not maintain it's height. My code:

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous">
    
    <title>Hello, world!</title>
    </head>
    
    <body>
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
            <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target1, #collapse_target2">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapse_target1">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 2</a>
                    </li>
                    <a class="navbar-brand">
                        <img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em">
                        <span>Home</span>
                    </a>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 4</a>
                    </li>
                </ul>
            </div>
        </nav>
        <nav class="navbar navbar-expand-sm navbar-light bg-light">
            <div class="collapse navbar-collapse" id="collapse_target2">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 5</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 6</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link 7</a>
                    </li>
                </ul>
            </div>
        </nav>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    </body>

解决方案

Use a single class to data-target the Navbars, instead of different id's. For example, give both the navbar-collapse elements the navbars class, and then the target is data-target=".navbars".

Demo: https://www.codeply.com/go/PvHpcBNuAp

Also, I'm not sure why you're using sticky-top on the 1st navbar. You should remove that otherwise the 2nd navbar will slide under the first on mobile when scrolling. If you want both navbars fixed at the top, see this answer.

   <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <button class="navbar-toggler" data-toggle="collapse" data-target=".navbars">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse navbars" id="collapse_target1">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <a class="navbar-brand">
                    <img src="https://image.freepik.com/free-vector/businessman-shouting-through-megaphone_23-2147511376.jpg" style="height: 2em">
                    <span>Home</span>
                </a>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 4</a>
                </li>
            </ul>
        </div>
    </nav>
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="collapse navbar-collapse navbars" id="collapse_target2">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 5</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 6</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 7</a>
                </li>
            </ul>
        </div>
    </nav>

Also see: Bootstrap 4 navbar with 2 rows

这篇关于Bootstrap 4 将两个导航栏折叠成一个切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆