Question

我在引导程序中有一个半透明的导航栏，但是当屏幕尺寸发生故障并转到＆＃34; mobile＆＃34;切换时查看它会将内容向下推，并以白色背景离开页面顶部。

这是我的代码：

HTML

<nav class="navbar navbar-custom" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#AboutMe">About Us</a></li>
            <li><a href="#Portfolio">Portfolio</a></li>
            <li><a href="#ContactMe">Contact Us</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS

.navbar-custom {
    background-color: rgba(240, 240, 240, 0.3);
}
.navbar-custom .navbar-nav > li > a, .navbar-custom .navbar-brand {
    color: black;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
    color: black;
    background-color: rgba(240, 240, 240, 0.3);
}
@media only screen and (max-width: 766px) {
    .collapsing, .in {
        background-color:rgba(240, 240, 240, 0.3)!important;
    }
    .collapsing ul li a, .in ul li a {
        color: black!important;
    }
    .collapsing ul li a:hover, .in ul li a:hover {
        color: white!important;
    }
}
.navbar-custom .navbar-toggle {
    border-color:black;
}
.navbar-custom .icon-bar {
    background-color:black;
}

我尝试改变position和z-index，但似乎没有一种方法可行，是否有更简单或不同的方式来实现我所做的事情？

Here's my codepen.

Answer 1

这是因为您将html {background-color: green}设置为＃container1，因此html和body仍将具有白色背景颜色。添加到您的CSS

{{1}}

Answer 2

在您的情况下，绿色背景位于#container1元素上。当导航菜单在移动设备上折叠/展开时，它会向下推动#container1元素（这意味着导航菜单后面不再有绿色背景）。

我建议绝对将导航菜单放在#container1元素上，然后添加填充以说明菜单的高度。

Updated Example

.navbar-custom {
  background-color: rgba(240, 240, 240, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

或者，你可以避免绝对定位，只需在body元素上设置背景（它总是在导航菜单后面）。

切换时，bootstrap navbar collapse是白色的

2 个答案: