在bootstrap 3小屏幕中粘贴导航

Question

我正在玩Bootstrap 3试图复制getbootstrap网站上使用的垂直导航栏。我遇到了几个问题而且我找不到很多可以使用的文档。

这是一个bootply链接，显示我来自哪里：http://bootply.com/77832

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

问题2是装饰性的。我希望导航上漂亮的粉红色背景能够填充整个容器，而不仅仅是文本的宽度。所以我想，嘿，这个坏孩子的宽度是100％，而且你已经完成了。我认为它会填充100％的包含它的col-md-3，但它实际上填满了100％的屏幕宽度。为什么它会延伸出它所在的col-md-3，我怎样才能达到理想的效果呢？

Answer 1

对于＃2，问题是UL有一个位置：固定，所以它有点“消除”自己知道它的父亲的宽度。基本上，它将body视为父级，因此width：100％将使其与页面一样宽。

对于＃1，您可能希望查看当页面变小时，将导航栏“粘贴”到页面的一侧。