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

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>

这是我在引导4中的简单导航条，下面是问题所在。当我缩小屏幕的宽度，“学习耶喜”增加肚脐的高度在崩溃之前，我希望它保持在相同的高度，直到崩溃。如何实现这一目标。？请看下面的链接图片

塌陷前的：

​

​

塌陷期间的：

​

​

塌陷后的：

​

​

Answer 1

它这样包装的原因(将菜单项中的两个单词放在两行上)只是因为屏幕上没有足够的空间。

因此，您有两个基本选项：

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

2)将菜单中的一些项目移动到下拉菜单(或页脚区域)，从而减少菜单中的项目数。