在 bootstrap 3 小屏幕中添加导航

Question

我在 Bootstrap 3 中尝试复制 getbootstrap 站点上使用的垂直导航栏。虽然我遇到了几个问题，但我没有找到很多文档可供使用。

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

问题 1 是，如果我将屏幕尺寸从大更改为小，我的导航现在位于我的文本下方。但在引导站点上，导航移动到屏幕顶部，文本位于其下方。如何修复它的响应性，以便在小屏幕上调整大小或查看它不会破坏布局？

问题 2 是外观问题。我希望导航上漂亮的粉红色背景填充整个容器，而不仅仅是文本的宽度。所以我想，嘿，给那个坏男孩一个宽度：100%，你就准备好了。我以为它会填充 100% 的 col-md-3 包含它，但它实际上填充了 100% 的屏幕宽度。为什么它会延伸到它所在的 col-md-3 之外，我怎样才能获得所需的外观？

Answer 1

对于 #2，问题在于 UL 有一个 position:fixed，所以它有点“移除”自己不知道其父级的宽度。基本上，它将 body 视为父级，因此 width: 100% 将使其与页面一样宽。

对于#1，你可能想看看，当页面变小时，让导航“不贴”到页面的一侧。