为什么我的引导导航栏在最小化时会被页面内容重叠？答案

【问题标题】：Why does my bootstrap navbar get overlapped by page contents when minimized?为什么我的引导导航栏在最小化时会被页面内容重叠？
【发布时间】：2015-07-02 19:54:30
【问题描述】：

这是网站：www.farzadv.ca/wiconnect

当我缩小屏幕尺寸，折叠菜单时，它不能正确显示，而且导航栏品牌也很尴尬，我怎样才能改变那张图片的缩放比例并修复导航栏？

这是css文件：

body{
	background-color: #DAEDFF;
}

.navbar .brand {
max-height: 40px;
padding-top: 0;
padding-bottom: 0;
}

.navbar .nav > li > a, .navbar .nav > li > a:first-letter,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a {
	font-style:bold;
}

.navbar a.navbar-brand {padding: 9px 15px 8px; }


.carousel-inner img {
  margin: 0 auto;
}
.carousel-control.left, .carousel-control.right {
    color:black;
    background-image: none
}

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 14px;
    background-color: rgba(165, 250, 172, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(165, 250, 172, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(165, 250, 172, 1) 100%);
    border-width: 1px;
    border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(119, 119, 119, 1);
    background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(85, 85, 85, 1);
    background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #a5faac;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #4f4f4f;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #4f4f4f;
    background-color: #57fb80;
  }
}

【问题讨论】：

我尝试使用：class="img-responsive" 使品牌徽标具有响应性，但它已经具有以下类别：class="navbar-brand" 编辑：max-width:100%; height:auto;" 也不起作用。

标签： css twitter-bootstrap navbar nav

【解决方案1】：

导航栏问题是由于缺少两个下拉切换链接上的 role="button" 属性。至于图片，我发现通过“背景图片”样式在 css 中实现图片通常更容易。为了让它覆盖整个 navbar-brand div，首先分配背景图像，然后使用“background-size:cover”来填充 div。之后，只需给该 div 一个特定的高度和宽度，就可以了。

【讨论】：