如何同时拥有固定的导航栏和固定的工具栏

Question

我在网站顶部使用标准的固定导航栏。但是，我还需要在顶部添加一个固定的工具栏。当我尝试将工具栏实现为主导航栏下的第二个固定导航栏时，工具栏会隐藏主工具栏。

有人可以举个例子来说明这个吗？

Here is an example in Plunkr

rm -r /Users/borislariushin/Library/Developer/Xcode/DerivedData/PilgrimApp-bfjwfpphvtnwqiaqkihxoimthbkp

Answer 1

将类工具栏添加到第二个导航栏（工具栏），如下所示：

（<nav class="navbar navbar-default navbar-fixed-top toolbar">）

然后将其添加到您的CSS：

.toolbar { margin-top: 51px; }

此外，使用固定顶部导航栏时，您需要在内容窗格或正文中添加填充顶部，以确保它们不会隐藏在导航栏后面。 对于两个51px高的导航栏，将以下内容添加到CSS：

body { padding-top: 102px; }

如果要增加/减少填充，可以根据自己的方便调整值。这个值只考虑了两个固定顶部元素。