使用页面调整Twitter Bootstrap扩展Navbar

Question

当我第一次安装twitter bootstrap并且没有编辑任何Bootstrap代码（旋转木马）时，导航栏看起来很正常但距离边缘有点远。

这是小尺寸调整时的样子：

然后，当我更改导航栏的大小以使其适合整个页面使用CSS高度和宽度时，它开始出现故障：

当浏览器未调整大小时，它看起来很正常但是如果你缩小了浏览器：

此外，如果浏览器不是默认大小但它不是很小，它将远离边缘。

这是制作折叠功能的代码：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
</button>

这是导航栏的CSS代码：

.navbar{position:relative;top:65px;height:75px;width: 100%;margin-bottom:20px;border:1px solid transparent}

如何保持折叠的东西，并确保导航栏始终从网页的边缘走到边缘，而不会出现故障，字样消失等等？

Answer 1

当你使用bootstrap时，你只需要从你的html中的“navbar”的父母中删除“container”类，这将使导航栏变为全宽