html - 自举 |响应式导航栏的问题

Question

我正在使用 Bootstrap 构建网站，但我不确定解决以下问题的最佳方法是什么。

我的导航栏左侧有一个大 Logo ，右侧有六个导航项。在 XS 屏幕尺寸下，导航项正确地折叠成汉堡菜单，但在它们折叠之前它们漂浮在 Logo 下方，这不应该是正确的行为。

演示:尝试调整此网页的大小 -> http://stackoverflowquestion.bss.design

Stack Overflow 上类似问题的一个解决方案是简单地更改折叠宽度 - 但是我发现这不是最佳选择，因为不同的设备具有不同的高度/缩放比例，因此宽度不是通用的。

解决此问题的最佳做法是什么？谢谢

Answer 1

最好的方法是在此处生成自定义 Bootstrap http://getbootstrap.com/customize/使用适当的媒体查询断点，您可以在那里编辑其他几项内容。 Bootstrap 标准宽度和其他参数只是基本框架 - 您可以随时编辑它们。

编辑:其他解决方案 - 只需将 Logo 缩放到较小的尺寸 - 使其响应(并使用最大宽度)。

Edit2:使用媒体查询缩小 Logo 容器 div(并保持 Logo 图像响应)- 使用该解决方案，您可以仅针对较低分辨率(screen-xs)保留折叠菜单，而 screen-lg/md 将保持未折叠.