Question

因此，直到最近才开始使用Bootstrap 4，从来没有让可折叠的Navbar按钮正常工作。

由于一切似乎都很好，所以我不知道自己在做什么错，因为我自己的眼睛看不到。

我在此使用的大多数代码大部分是从Bootstrap 4官方文档中进行的半复制和粘贴：

    <?php require('header.php'); ?>
    <nav class="navbar navbar-expand-md">

        <a href='/' class="navbar-brand">
          <img style='max-width: 100%;' src='logo.png' />
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul style="margin: 0;" class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="blog.php">Blog</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="contact.php">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
    <?php require('footer.php'); ?>

Answer 1

假设您的PHP标头包含所有正确的Bootstrap 4引用（如果需要仔细检查，则会添加到我的代码段中），导航栏缺少的另一种是配色方案。也就是说，您的导航栏在那里并且可以正常使用，它只是白色的白色，所以您看不到它。

要解决此问题，您可以通过将light和navbar-light类添加到导航栏中来选择bg-light主题，或者通过添加类{{1} }和navbar-dark。当然，只需设置bg-dark的{{1}}，您也可以始终使用自己的颜色。

此处显示了浅色主题：

background-color

黑暗主题显示在这里：

.navbar

Bootstrap 4-可折叠的Navbar按钮不起作用/显示

1 个答案: