Question

以下是网站：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;
  }
}

Answer 1

导航栏问题是由于缺少角色=＆＃34;按钮＆＃34;两个下拉切换链接上的属性。至于图片，我发现在css中通过＆＃34; background-image＆＃34;实现图像通常更容易。样式。为了使其覆盖整个navbar-brand div，首先分配背景图像，然后使用＆＃34; background-size：cover＆＃34;为了填补div。在那之后，只要给这个div一个特定的高度和宽度，就可以了。

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

1 个答案: