通过调整页面大小扩展导航栏 Twitter Bootstrap

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" class，这样使导航栏全宽

通过调整页面大小扩展导航栏 Twitter Bootstrap

Extending Navbar with Page Resizing Twitter Bootstrap

html

css

navbar

twitter-bootstrap

twitter-bootstrap-3