如何修复 BS4 导航栏折叠按钮？ [复制]

Question

我似乎无法让我的代码的切换按钮工作。调整窗口大小时，它不会显示，随后导航栏也不会工作。

<nav class="navbar navbar-expand-md bg-faded my-auto mx-0 p-0">
    <a href="/" class="navbar-brand col-md-2 m-0 p-0 text-center app-logo">
        <div class="d-sm-block d-lg-none"><strong>mAn</strong></div>
        <div class="d-none d-sm-none d-lg-block">my App name</div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse col-md-10 m-0 p-0" id="collapsingNavbar3">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
        <ul class="nav navbar-nav right-nav">
            <li class="nav-item ">
                <a class="nav-link" href="#" id="displayName">UserName</a>
            </li>
            <li class="nav-item ">
                <a id="btnBack" class="nav-link" style="" href="/logout">logout</a>
            </li>
        </ul>
    </div>
</nav>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md bg-faded my-auto mx-0 p-0">
    <a href="/" class="navbar-brand col-md-2 m-0 p-0 text-center app-logo">
        <div class="d-sm-block d-lg-none"><strong>mAn</strong></div>
        <div class="d-none d-sm-none d-lg-block">my App name</div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse col-md-10 m-0 p-0" id="collapsingNavbar3">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
        <ul class="nav navbar-nav right-nav">
            <li class="nav-item ">
                <a class="nav-link" href="#" id="displayName">UserName</a>
            </li>
            <li class="nav-item ">
                <a id="btnBack" class="nav-link" style="" href="/logout">logout</a>
            </li>
        </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 1

正确使用所有链接试试这个... 我修改了您的 <nav/> 类，而不是 bg-faded 我使用了 bg-dark navbar-dark

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-md bg-dark navbar-dark my-auto mx-0 p-0">
<a href="/" class="navbar-brand text-center app-logo">
            <div class="d-lg-none d-sm-block"><strong>mAn</strong></div>
            <div class="d-none d-lg-block d-sm-none">my App name</div>
        </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse col-md-10 m-0 p-0" id="collapsingNavbar3">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
    <ul class="nav navbar-nav right-nav">
        <li class="nav-item ">
            <a class="nav-link" href="#" id="displayName">UserName</a>
        </li>
        <li class="nav-item ">
            <a id="btnBack" class="nav-link" style="" href="/logout">logout</a>
        </li>
    </ul>
</div>
</nav>

Answer 2

您可以使用默认的 Bs4 类 navbar-dark & bg-dark 来获得暗视图或更多颜色，您可以访问此link

我只是将bg-faded 更改为navbar-dark 用于白色字体和bg-dark 用于深色背景。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark my-auto mx-0 p-0">
    <a href="/" class="navbar-brand col-md-2 m-0 p-0 text-center app-logo">
        <div class="d-sm-block d-lg-none"><strong>mAn</strong></div>
        <div class="d-none d-sm-none d-lg-block">my App name</div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse col-md-10 m-0 p-0" id="collapsingNavbar3">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
        <ul class="nav navbar-nav right-nav">
            <li class="nav-item ">
                <a class="nav-link" href="#" id="displayName">UserName</a>
            </li>
            <li class="nav-item ">
                <a id="btnBack" class="nav-link" style="" href="/logout">logout</a>
            </li>
        </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>