gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:10:41 25 4
gpt4 key购买 nike

<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”会在折叠前增加导航栏的高度,我希望它在折叠前保持相同的高度。如何实现这一目标。 ?请看下面链接的图片

崩溃前:

before collapse

崩溃期间:

during collapse

折叠后:

after collapse

最佳答案

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

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

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

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

关于html - Bootstrap 导航栏在较小的屏幕上没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48478760/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com