Question

<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
                <a class="navbar-brand" href="#">Yehee-Lounge</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 class="navbar-nav mr-auto">
                        <li class="nav-item active"><a class="nav-link scroll" href="#top">Home</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">About</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Learn Yeehee</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Courses</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Events</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Impression</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Contact</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Newsletter</a></li>
                    </ul>
                    <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
                </div>
            </nav>

这是我从bootstrap 4开始的简单导航栏，下面是问题所在。当我减小屏幕的宽度时，＆＃34;学习yeehee＆＃34;在折叠之前增加导航栏的高度，我希望它保持在相同的高度直到崩溃。如何实现这一目标。？请查看下面链接的图片

崩溃前：

崩溃期间：

折叠后：

Answer 1

它包裹的原因（将菜单项的两个单词强制为两行）仅仅是因为屏幕上没有足够的空间。

所以，你有两个基本选择：

1）将navbar-expand-sm替换为navbar-expand-lg。这将确保足够的空间并防止问题。

2）通过将菜单中的一些项目移动到下拉菜单（或页脚区域）来减少菜单中的项目数量。

Bootstrap导航栏在较小的屏幕上没有响应

1 个答案: