CSS Bootstrap 响应式菜单差异

Question

我正在为当地的一家律师事务所开发一个网站，但遇到了一个奇怪的 CSS 问题。 折叠的响应式菜单以两种不同的方式显示。使用 Quirktools 的 Screenfly，我注意到有两个设备存在菜单 CSS 问题。

第一个也是正确的方法在这里找到 此问题已修复 该链接适用于屏幕分辨率为 603 像素 x 966 像素的设备。

第二个也是不正确的方法在这里找到 此问题已修复 此问题已修复 第一个链接针对屏幕分辨率为 800 像素 x 1280 像素的设备 第二个目标设备的屏幕分辨率为 768px x 1024px

10 英寸上网本的下一个尺寸也可以，可以在这里找到 此问题已修复 这个针对屏幕分辨率为 1024px x 600px 的设备

有问题的网站是 这个问题已经解决了

有谁知道这是什么原因造成的或如何解决？

任何帮助将不胜感激。我以前没有使用过 Bootstrap，这可能有点令人困惑。

最好， 蒂姆

Answer 1

您在.header-contact 上有一个float:right，您的布局在 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;}

    }