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

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

问题描述

我一直在尝试应用此 Bootstrap 4.0-折叠成一个扳钮的两个NavBars 回答了我的问题，但经过一番努力仍未解决.

我正在尝试将两个导航栏的内容折叠到一个切换按钮中.

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

     <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>

解决方案

使用单个类将Navbars定位到数据，而不是使用不同的ID.例如，将两个navbar-collapse元素都设置为navbars类，然后将目标设置为data-target=".navbars".

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

此外，我不确定您为什么在第一导航栏上使用sticky-top.您应该删除它，否则第二个导航栏在滚动时会在移动设备上的第一个导航栏下方滑动.如果要将两个导航栏都固定在顶部，请

另请参阅: Bootstrap 4导航栏有2行

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天全站免登陆