为什么我的导航栏无法正确折叠并显示下拉按钮？

Question

我刚刚开始学习基础知识，我确定此代码有很多错误，这是错误的方法还是我至少做得正确？ ：Phttps://jsfiddle.net/0cjwyuqe/

<nav class="navbar navbar-dark bg-dark navbar-expand text-nowrap">
<div class="container">
    <div class="row w-100 align-items-center">

        <div class="col-md-3">
            <a href="" class="navbar-brand justify-content-start">
                <h1 class="display-3" id="cont">TEST<span id="se">.SE</span></h1>
            </a>
        </div>
        <button type="button" class="navbar-toggler collapse" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="col-md-5">
            <div class="navbar-nav">
                <div class="collapse navbar-collapse" id="navbar1">
                    <a href="#" class="nav-item nav-link">TEST1</a>
                    <a href="#" class="nav-item nav-link">TEST2</a>
                    <a href="#" class="nav-item nav-link">TEST3</a>
                    <a href="#" class="nav-item nav-link">TEST4</a>
                    <a href="#" class="nav-item nav-link">TEST5</a>
                </div>
            </div>
        </div>

        <div class="col-md-1"></div>


        <div class="col-md-3">
            <div class="navbar-nav justify-content-end">
                <a href="#" class="nav-item nav-link mx-1 text-nowrap" id="login"><i class="fas fa-user-check mr-1"></i>Login</a>
                <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Register</a>
            </div>
        </div>
    </div>
</div>

Answer 1

您非常亲密，只需要进行两次更改

• 在您的导航元素上，我将类navbar-expand更改为navbar-expand-sm，该内容表示导航栏切换导航栏的水平（正常）和垂直（汉堡菜单）样式的断点是sm，可能是[C0 ]或navbar-expand-md等
• 在具有类navbar-expand-lg的按钮上，您放置了“折叠”类，这意味着该按钮具有navbar-toggler且不在DOM中

正在运行的代码段下面有这两项更改：

display:none