移动设备导航栏中的Bootstrap-3.1.0错误？

Question

在我的网站上，当我从移动设备访问它或在Chrome浏览器中缩放+时，我发现我在bootstrap导航栏中发现了错误。 这是截图：

100％ - 好的

缩放150％ - 错误？

缩放175％ - 再次确定（同样的结果也必须是150％）

是虫子吗？如果是这样，如何解决？我是后端开发人员，而不是前端开发人员，所以我遇到了一些问题。 这里是该网站的链接，如果可以帮助 - socratify.ru

提前致谢！

Answer 1

默认的bootstrap css使用带有断点的敏感媒体查询 在768,992和1200像素。移动优先，因此导航栏菜单的默认行为是隐藏它的按钮并在客户端显示时显示导航项至少为768px（“小设备”断点）。虽然这些在许多情况下都有效，但您可以更改它们以使用您的内容。

您当前正在使用来自cdn的默认引导程序css，它是使用这些断点预先烘焙的。您可以自己下载css并更改媒体查询，或者...... Bootstrap有一个工具可以在http://getbootstrap.com/customize/构建自定义版本。 “媒体查询断点”部分包含相关的较少变量。您可能想要使用“小型设备”断点来满足您的需求。引用自定义css而不是cdn中的css。您仍然可以通过他们的cdn提供javascript。

Answer 2

我不相信这是一个错误，你的列表项目太宽，所以它会破坏。尝试添加此css规则以覆盖大小超过768的navbar-nav边距（它在Chrome和FF中有效）：

@media (min-width:768px){
.navbar-nav {
    float: left;
    margin: none;
 }
}