Bootstrap 3媒体查询：在奇数维度发生的断点

Question

我是Bootstrap和Media Queries的业余开发人员。

我正在努力使Bootstrapped网站的导航栏响应轻微的自定义。我在调整浏览器大小时遇到​​了问题。

在正常尺寸下，网站看起来像这样：

但是，有一个1130像素的断点（非常奇数？为什么！），导航栏看起来像这样：

如您所见，导航栏的宽度加倍，用户图标移位到下一行。 当我们进一步减小尺寸时，导航栏仍然像这样直到1005px： 当搜索框出现在最左端时，下一个断点是1004px：

直到960px，这仍然是这样的：

在959px，设计再次改变CSS：

在881px，设计保持相同的CSS：

CSS再次更改为880px：

直到最后到达767px的最后一个断点，之后网站保持不变：

我不明白为什么在1130px，1004px，959px和880px处存在如此尴尬的物品位移。

我该怎么做：

1. 在1130px，用户图标不会溢出到下一行？

2. 从960px到1004px，搜索栏和用户图标不会移到下一行。

3. 在880px处，用户图标不会替换到下一行。

我希望在任何时候，搜索栏和用户图标都应与徽标内联。我应该如何实现这一目标？

如果有人可以忍受这种痛苦，并告诉为什么在如此奇怪的数字上发生了破裂，我会很高兴。

这是以styles.css编写的以下媒体查询：

@media (min-width: 320px) {
    .navbar-brand {
        margin-left: 0px;
    }
}

@media (min-width: 640px) {
    .navbar-brand {
        margin-left: 0px;
    }
}

@media(min-width:960px) {
    .navbar-brand {
        margin-left: 250px;
    }
}

网站为up here，HTML / CSS / Bootstrap文件为are here。

Answer 1

将您的媒体查询更改为此功能

@media (min-width: 320px) {
    .navbar-brand {
        margin-left: 0px;
    }
}

@media (min-width: 640px) and (max-width: 880px){
    .navbar-brand {
        margin-left: 5px;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: 10px;
    }
    .navbar-nav>li>a {
        padding: 30px 5px !important;
    }
    .navbar-nav{
        margin-left:5px;
    }

}

@media(min-width:960px) {
    .navbar-brand {
        margin-left: 120px;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: 30px;
    }
    .navbar-default .navbar-nav>li>a {
    padding: 30px 15px !important;
    }
}