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

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 的简单导航栏，下面是问题所在。当我减小屏幕宽度时，“learn yeehee”会在折叠前增加导航栏的高度，我希望它在折叠前保持相同的高度。如何实现这一目标。 ？请看下面链接的图片

崩溃前:

崩溃期间:

折叠后:

Answer 1

它之所以这样换行(将一个菜单项的两个词强制分到两行)只是因为屏幕上没有足够的空间。

因此，您有 2 个基本选项:

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

2) 将菜单中的一些元素移至下拉菜单(或页脚区域)，从而减少菜单中元素的数量。