CSS Bootstrap响应菜单差异

Question

我正在为当地法律公司开发一个网站，并且遇到了一个奇怪的CSS问题。 折叠响应菜单以两种不同的方式显示。使用Quirktools中的Screenfly我注意到两个设备有菜单CSS问题。

第一个也是正确的方法可以在这里找到 这是固定的 该链接适用于屏幕分辨率为603px×966px的设备。

第二和不正确的方法可以在这里找到 这一直是固定 这一直是固定 第一个链接的目标与800像素X 1280px 与768px X 1,024像素

的屏幕分辨率的第二目标设备的屏幕分辨率的设备

下一个规模达10" 上网本也很好，可以在这里找到 这一直是固定 与1,024像素X 600像素

屏幕分辨率这一个目标的设备有问题的网站是 本已被固定

有谁知道什么会导致这个或如何解决它？

任何帮助将不胜感激。我之前没有使用过Bootstrap，它可能有点混乱。

最佳， 添

Answer 1

你有float:right上.header-contact你650像素

布局休息，是因为你切换添加此媒体查询

@media (max-width: 650px) { 
    .header-contact{ 
    float:left; 
    } 
} 

下一个导航杆设计打破您的nav-bar at 818px和应用于导航栏的颜色是通过此查询。

@media (max-width: 767px) { 

.menu-nav ul {border:none;} 
.navbar-collapse{background:#353f00;} 

} 

所以任何屏幕上方767px会有一个问题，直到818px。

查询更改为818px

@media (max-width: 818px) { 
    .menu-nav ul {border:none;} 
    .navbar-collapse{background:#353f00;} 

    }