bootstrap 3.3.4 中折叠的导航栏覆盖了它后面的内容

Question

我正在使用 Bootstrap 3.3.4。我需要导航栏中链接的背景（一旦它在断点处折叠）大约 50% 透明，这样它就不会覆盖它后面的内容。现在，当我点击 "Menu" 时，会出现一个垂直堆叠链接的大块，覆盖它后面的所有内容。

Answer 1

一旦 bootstrap 达到 768 像素，导航栏就会折叠并在导航栏右侧显示一个图标，允许下拉菜单垂直显示。现在，要将下拉菜单更改为不透明并使背景透明 50%，可以将以下代码添加到您的 custom.css.

@media(max-width:768px) {
    .navbar-inverse {
        background-color: transparent;
    }
    .navbar-collapse {
        background-color: { your choice of color };
        opacity:0.5;
    }
}

...或者如果您只想查看文本后面的背景而不想其他，请将代码应用于 custom.css as...

@media(max-width:768px) {
    .navbar-inverse {
        background-color: transparent;
    }
    .navbar-collapse {
        opacity:0.5;
    }
}

bootstrap 3.3.4 中折叠的导航栏覆盖了它后面的内容

Collapsed navbar is covering content behind it in bootstrap 3.3.4

twitter-bootstrap

navbar

transparent

collapse