我目前正在尝试在Bootstrap中创建一个100%宽度的导航栏,但它并没有像它应该的那样工作。如何将导航栏缩放到100%宽度?
<div class="container-fluid" style="border: 1px solid">
<!-- Navbar -->
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootflat</a>
</div>
</div>
</nav>
</div>
</div>
</div>
5条答案
按热度按时间bwleehnv1#
删除
.row
和.col-md-12
div-它们会添加填充。只有在将内容划分为列时才需要使用它们。n9vozmp42#
我认为这段代码看起来很好,符合你的要求。
字符串
请参见here
7uzetpgm3#
您不需要行和网格列div,因为导航栏将始终处于全宽,并且您使用的是
.container-fluid
。试试这个:字符串
qco9c6ql4#
正如发生在我身上,如果你想要它与顶部的全宽度(粘性)。将
fixed-top
类添加到nav
就可以了。字符串
wbrvyc0a5#
只需添加以下css代码
body{padding:0;margin:0}
。对我很有效。希望这对你有帮助。