Question

我已经构建了一个Navbar，确切地说它是如何在一个教程上完成的，但是我的导航栏在水平显示时会以某种方式垂直显示。关于如何解决这个问题的任何想法？提前致谢

＆＃13;

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <div class='container'>
        <ul class="nav navbar-nav">
            <li class='nav-item'>
                <a class='nav-link' routerLink="/home" routerLinkActive="active">Home</a>
            </li>
            <li class='nav-item'>
                <a class='nav-link' routerLink="/documents" routerLinkActive="active">Docs</a>
            </li>
            <li class="nav-item dropdown">
                <div ngbDropdown class="d-inline-block dropdown-links">
                    <button class="btn btn-outline-primary" id="proposalDropdown" ngbDropdownToggle>
                        Proposals
                    </button>
                    <div class="dropdown-menu" aria-labelledby="proposalDropdown">
                        <a class="dropdown-item" routerLink="/proposals" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true}">Proposals</a>
                        <a class="dropdown-item" routerLink="/proposals/new" routerLinkActive="active">New Proposal</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

＆＃13;

Answer 1

将navbar-toggleable-sm（md / lg）添加到nav元素，使其水平直到sm，否则每次都会呈现垂直。 / p>

<nav class="navbar navbar-toggleable-sm navbar-fixed-top navbar-light bg-faded">

   ....

</nav>

Demo Plunker

Answer 2

Bootstrap 4要求您将 navbar-expand-md 添加到打开的导航类中，否则它将是垂直的..

<nav class="navbar navbar-fixed-top navbar-expand-md navbar-light bg-faded">

对于不同的断点，您可以将 md 替换为 xs ， lg 或 sm 。

Go to Bootstrap 4 Navbar documentation and view the first example.

Answer 3

首先要检查的是在CSS中引用引导程序

此示例适用于Angular中的应用程序

不包含引导程序的分页如下所示

在项目中包含引导程序引用

现在具有自举效果的分页

Answer 4

避免添加单引号的类，而应添加双引号的类。

Bootstrap 4导航栏垂直出现而不是水平

4 个答案: