css - Bootstrap 的 'navbar' 宽度限制正在杀死我的菜单

标签 css twitter-bootstrap menubar

好的,开始了(第一次提问,所以请耐心等待,如果您需要更多信息,请告诉我。)

正如我的标题所说,我正在使用 Bootstrap 生成一个水平菜单(在 CSS 中称为“导航栏”),当我将屏幕尺寸缩小一点时,最右边的导航栏的内容开始消失或去下一行。如果它发生在宽度接近内容时,我将不胜感激(并理解),但它发生在宽度约为 750-768 像素时。在某些测试中,我看到内容本身完全。老实说,如果有人能告诉我为什么(以及发生了什么),我将不胜感激。哎呀,它最终可能会成为一个很棒的无障碍技巧!

到目前为止我发现的是一小段奇怪的代码:@media (min-width: 768px)。对我来说真正奇怪的是 Chrome 检查器甚至不让我改变这个东西。这是我以前从未见过的。老实说,我对这种格式化属性也不太熟悉,但到目前为止,我所受的教育还没有提供足够的洞察力。

screenshot

现在我希望这是一个有人觉得很熟悉的问题(我一直在寻找,但没有成功),因为此时我不想将整个代码库转储到网上。如果有必要,我会遵守,但我希望有人可以分享他们对这个问题的经验,这样我就可以放下我的“愤怒的拳头”。这是一个非常愤怒的拳头。相信我。

运输是一项功能……也许是最重要的功能。

最佳答案

正如其他人在上面提到的,您提到的行为是 Bootstrap 的默认行为……不过您可以对其进行自定义。

CSS 媒体查询 @media (min-width: 768px) ... 设置导航菜单折叠时的视口(viewport)或窗口宽度。如果您想更改此设置,一种选择是转到 http://getbootstrap.com/customize/ ,向下滚动到媒体查询断点并将 @screen-sm 设置为您想要的任何宽度。

如果你去http://getbootstrap.com/customize/ ,滚动到网格系统部分,您可以使用 @grid-float-breakpoint 自定义导航栏折叠。感谢cvrebert以下更正

然后转到页面底部,编译并下载您自定义的 Bootstrap CSS 文件。

如果你使用 LESS,你也可以做类似的事情。

希望这有助于放松愤怒的拳头;)

关于css - Bootstrap 的 'navbar' 宽度限制正在杀死我的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24600287/

相关文章:

html - 如何防止过渡动画运行页面加载

java - 菜单栏出现在 JFrame 的左侧。如何让它出现在JFrame的顶部?

javascript - 带 Twitter bootstrap 的水平滚动表

python - 如何使 Menu.add_command() 在 Mac 上的 tkinter 中工作?

swift - 如何为 macOS 菜单栏应用程序启用自动启动?

css - <textarea> 框在当前文本溢出给定宽度时增加高度(换行)?

css - * CSS 规则如何比类或 ID 样式规则更具体?

html - 7 Bootstrap 中的列网格在 xs 处崩溃

jquery - 从外部链接到 Bootstrap 选项卡 - 如何将选项卡设置为 "active"?

javascript - 在其他 jQuery 插件中调用自定义 jQuery 插件