Html 调整大小时导航栏的高度加倍

我（几乎）创建了一个响应性导航条，但在手机屏幕大小和全窗口大小之间，导航条的高度增加了一倍。我尝试了很多引导类，但都没有成功。这是全屏格式（正确）：

这是在减小浏览器窗口大小之后（不正确）：

如果有人能告诉我是什么导致了这一切，那将是非常有帮助的

标题
...

。标题区域{位置：固定；左侧：0；顶部：0；宽度：100%；z索引：998；背景色：#27ae60}
.菜单区{显示：柔性；对齐项：居中}
.logo h3{字体系列：'Lato'，无衬线；颜色：#fff}
.logo a{显示：内联块；字体系列：'Lato'，无衬线；颜色：#fff；字体大小：18px}

据我所知，

行

类的每个直接子级通常应该是一个

列

，以便所有子级都等于12，并相应地分配宽度。当你说

col-lg-9

时，这意味着当我们在一个大的视口中时，这个div应该占据9/12的宽度。当它是一个大（

lg

）下的视口时，我们将是完整的12宽并开始堆叠。比如说

大的

| col-lg-2 | col-lg-6 | col-lg-4 |

中小型

|col-lg-2|
|col-lg-6|
|col-lg-4|

---

您可以使用md和sm对此进行微调，并自定义它到达这些视口时发生的情况。我不认为这是一个很好的解释，但我希望它有帮助。你应该尽量保持你的类等于12，并且在所有类中使用相同大小的

lg

或

md

或

sm

。

如果你从html中删除所有额外的代码，你可能会有更好的运气。不仅是为了得到答案，而且是为了弄清发生了什么。理想情况下，您希望将范围缩小到仅导致问题的div。也就是说，删除所有的{%%}，这样严格来说这就成了一个HTML/CSS问题。如果这使它工作，那么你知道它是在你的模板代码中，等等。我猜当它达到中等大小时，它是通过引导和col-md-12类来堆叠div的。使用inspector找出链接上方的大区域与之相关。@ThomasByy我完全忘记了inspector工具，谢谢。原来是row类中的col-lg-9类。请随意展开，这样我就可以给你答案了，因为我仍然不明白为什么col类会堆叠。因此，你需要使用

sm

类，这样即使在一个小视口中，你也可以控制宽度，而不需要堆叠。