Bootstrap 4导航条以垂直而非水平方式显示

Question

我已经按照教程建立了一个导航栏，但是它出现了垂直的情况，而不是水平的。有没有解决这个问题的想法？先谢谢了。

<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>

- Carl Warburton

---

你是否已经在你的页面中引入了Bootstrap？看起来你没有任何样式。你需要使用CDN或下载Bootstrap并链接CSS。 - redeemefy

Answer 1

Bootstrap 4要求您在开头的nav类中添加navbar-expand-md，否则它将垂直显示。

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

你可以在不同的断点上用xs, lg或者sm替代 md。 前往Bootstrap 4导航栏文档并查看第一个示例。

- Inyoka

Answer 2

将navbar-toggleable-sm（md/lg）添加到nav元素中以使其水平延伸到sm，否则它将在每次渲染时垂直显示。

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

   ....

</nav>

Demo Plunker

- Pankaj Parkar

Answer 3

首先要检查的是在css中引用了bootstrap

这个例子是针对Angular应用程序的

1. 没有包含bootstrap时，分页看起来如下所示

在项目中包含Bootstrap的引用。

现在使用Bootstrap效果的分页。

- psuneel127

Answer 4

避免使用单引号添加类，改用双引号添加类。

- Amir7