Bootstrap 4导航栏垂直出现而不是水平出现 [英] Bootstrap 4 navbar appearing vertically not horizontally

问题描述

我已经完全按照教程制作了导航栏，但是导航栏在应水平显示时也垂直显示了.关于如何解决此问题的任何想法?预先感谢

I have built a Navbar exactly how it has been done on a tutorial yet somehow my navbar appears vertically when it should appear horizontally. Any ideas on how to fix this problem? Thanks in advance

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

推荐答案

将navbar-toggleable-sm(md/lg)添加到nav元素以使其水平直到sm，否则将被渲染为垂直每次.

Add navbar-toggleable-sm(md/lg) to nav element to make it horizontal till sm, otherwise it would be render vertical every time.

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

   ....

</nav>

演示柱塞

这篇关于Bootstrap 4导航栏垂直出现而不是水平出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！