Question

到目前为止，我能够保持导航栏透明的唯一方法是将其设置为fixed-top，如下所示：

<nav class="navbar fixed-top navbar-inverse">
    <!-- more html -->
</nav>

正如您所见here。

我希望我的导航栏卡在页面顶部并同时保持透明。删除fixed-top删除透明度并将导航页面图片（以及整个组件）推送到导航栏下方（当它应与图片重叠时）。

如何实现？

Answer 1

试试这个：

<nav class="navbar navbar-overlay navbar-inverse">
    <!-- more html -->
</nav>

然后在你的CSS中写下这个：

.navbar-overlay {
    margin-bottom: -104px; // Pulls the content under the navbar up by 104px which is the height of your navbar.
    z-index: 1; // Tells the browser that your navbar should be ontop of your content. This allows your links in your navbar to still work when you hover over them.
}

Answer 2

推荐的方法是在身体上使用padding-top:56px。

固定的导航栏使用位置：固定，意味着它们被拉出 DOM的正常流程并且可能需要自定义CSS（例如，填充顶部在...上，以防止与其他元素重叠。

https://getbootstrap.com/docs/4.0/components/navbar/#placement

如果您只想应用透明度，当背景图片可见时，您可以有条件地应用position:fixed，如下所示：http://codeply.com/go/4ElKQpnhy3

将bootstrap 4导航栏保持在顶部并保持透明

2 个答案: