Question

我是Bootstrap CSS的新手。我直接从Bootstrap 4.0 Beta页面示例（https://getbootstrap.com/docs/4.0/components/navbar/）获取此代码。

在Boostrap示例页面中，此代码在桌面浏览器上工作并显示导航，但是当我在页面中使用此代码时，默认情况下它不显示桌面浏览器上的导航;它默认在任何尺寸的浏览器上显示汉堡包菜单。

非常感谢任何帮助。

<div class="row-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

Answer 1

你发布的内容似乎运行良好。您可以在示例中添加更多代码吗？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>
</div>

Answer 2

我发现了问题。我将Chrome升级到最新版本，现在可以使用了。

Answer 3

这是一个错误，从先前版本复制bootstrap.min.js的内容，它应该正常工作。

Bootstrap CSS 4.0导航栏不显示桌面浏览器上的菜单，并且始终折叠/显示汉堡包菜单

3 个答案: