bootstrap 3小屏幕中的附加导航

Question

我在Bootstrap 3中尝试复制getbootstrap站点上使用的垂直导航栏。不过，我遇到了一些问题，而且我找不到太多的文档可供参考。

这里有一个引导链接，告诉你我来自哪里：http://bootply.com/77832

第一个问题是，如果我将屏幕尺寸从大变小，我的导航现在就在我的文本下面。但是在bootstrap站点上，导航移动到屏幕的顶部，文本落在屏幕的顶部。我如何修复它的响应性，以便在小屏幕上调整大小或查看它不会破坏布局？

问题2是关于化妆品的。我希望我的导航上漂亮的粉红色背景填充整个容器，而不仅仅是文本的宽度。所以我想，嘿，给那个坏男孩一个宽度:100%，你就都准备好了。我原以为它会填满包含它的col-md-3的100%，但实际上它填满了屏幕宽度的100%。为什么它要从它所在的col 3中延伸出来，我如何才能实现所需的外观？

Answer 1

对于#2，问题是UL有一个位置:fixed，所以它在某种程度上“移除”了自己，不知道它的父对象的宽度。基本上，它将正文视为父对象，因此宽度: 100%将使其与页面一样宽。

对于#1，你可能想看看，当页面变小时，让导航“不固定”在页面的边上。