Bootstrap 导航栏折叠不显示菜单中的所有列表项 (<li>)答案

【问题标题】：Bootstrap navbar collapse doesn't show all list items (<li>) from the menuBootstrap 导航栏折叠不显示菜单中的所有列表项 (<li>)
【发布时间】：2019-07-05 15:42:33
【问题描述】：

我在一个网站上工作，我已经实现了从这里获取的引导程序的倒置导航栏：

https://getbootstrap.com/components/#navbar

我没有修改它，但是当它在计算机浏览器中调整为较小的窗口时，或者在手机上查看时，当您单击“3栏图标”展开菜单时，它并没有显示所有菜单按钮（

)。

我曾尝试更改 CSS，但没有任何运气。

我应该寻找什么来改变，或者为什么它没有显示菜单中的所有项目？

这是网站本身：https://dh-automotive.com

【问题讨论】：

发布一个导航栏的jsfiddle
jsfiddle.net/tz7t05rd 它似乎在那里工作，HTML 部分在其他 div 中，因此其中一个可能导致它无法正确显示。明天我会看看自己，并将在此处发布我的行为和结果的报告。谢谢
你好，所以我看了，只有 1 个 css 文件使用了引导文件的一部分，它是一个标准的 style.css，我修改了以前的小提琴并在下面添加了整个 style.css 内容引导程序。（它也很长而且很小）。 jsfiddle.net/tz7t05rd 运行时给出了我想要修复的问题，即当折叠并单击打开时，并非所有菜单项都显示。我真的很感谢任何花时间帮助我的人，我真的这样做了！亲切的问候
没有人有想法或建议？亲切的问候
今晚或明天会尽力帮助，在工作atm，最近很忙，sry

标签： html css navbar

【解决方案1】：

在你的 style.css 文件中找到这个：

.nav {
    width: 90%;
    float: right;
    max-height: 65px;
    min-width: 680px
 }

删除 max-height 和 min-width 行。

总体而言，您的 CSS 非常混乱，您是如何设法使其达到这种状态的？你用什么来建立这个网站？

【讨论】：

感谢您，这确实使我能够看到菜单中的所有项目。是的，它确实非常混乱，我分别添加了一些东西，比如菜单和其他 css/js 东西来尝试，但我忘记了我使用什么和不使用什么。换句话说，我一直在忽略某些事情（我是 html/css/js 的新手），这让我走到了现在。知道单击菜单栏时如何将所有菜单项设置在彼此下方吗？我要感谢您投入的时间，我真的很感激 Varin！
没问题。老实说，我建议先把它清理干净。有很多样式根本不需要。将其全部剥离到最低限度。此外，你的图像是巨大的！它使网站加载时间过长。将它们的大小缩小到它们在网站上显示的大小 - 大约 900x600？将它们另存为 .png 并通过此工具进行处理：tinypng.com 另外我可以为您提供更多帮助，但我不明白您的意思：Any idea how i would go to set all menu items underneath each other when the menu bars is clicked ? 它们现在如何显示？
好的，我刚刚访问了你的网站，我下班去看看。尝试删除我在您的样式表中的回答中提到的整个.nav 样式，看看会发生什么。
好吧，首先我要尝试删除 .nav 样式，看看它带我去哪里。之后，我将减小所有图像的大小（感谢您的帮助和建议！），然后我会检查哪些 css/js 未使用并删除它们。我已经开始清理 html 并让内容更具可读性和评论性。我真的很感谢你的帮助，我是认真的！
所以我已经在 style.css 中使用了导航类，我已经从中删除了这部分并且每个菜单项现在都在彼此下方：code.nav li{border-left:0.5 px solid rgba(100,32,32,1);border-right:0.5px solid rgba(100,32,32,1);width:14.333%;display:inline-block} 我还删除了像css/这样的双重内容每个语言版本中的 js （矫枉过正）我还使用您给我的链接（现在已添加书签）缩小了每个图像的大小，接下来我将浏览每个 css 文件，看看哪些是 udes，哪些不是，并删除未使用的那些。未使用的类也一样。