Question

我是一个Bootstrap / css新手所以我很抱歉，如果之前已经讨论过......我一直在寻找各种顶级导航的可能性，并且一直在使用＆＃34; navbar-fixed-top＆＃34;使用Bootstrap的导航栏预设进行测试。

我的问题是：是否可以应用＆＃34;固定＆＃34;容器上的标签可能包含多个项目（徽标和多个导航菜单行）？

以此网站为例：http://www.stonehill.edu 是否可以采取网站的顶部区域（紫色和白色行），并使它们都固定在屏幕的顶部，但他们将保持响应和大小向下只显示在屏幕顶部的徽标xs大小，其他导航项目显示为徽标下方的拆分按钮下拉（或简单地嵌套在汉堡菜单中）？

这是一个javascript / jquery动作还是可以用css处理？

感谢您的任何建议/见解！

Answer 1

这只是css。尝试下一件事。按照以下方式构建您的部分：

<div class="nav">
...Navigation
</div>
<div class="content">
Rest of website
</div>

现在要应用这种行为，您需要将div class="nav"修复到顶部，并使用margin从顶部偏移div class="content"。这个CSS将帮助你：

nav{
    position: fixed;
    top: 0;
    height: 100px; /*Put any height that you need here, and use that value for margin-top*/
}
content{
    margin-top: 100px;/*Equal to nav height*/
}

您不需要为nav指定身高，让他扩展自己的内容，并将该值设为margin-top。

修复了Bootstrap中的多导航容器？

1 个答案: