我正在使用 Bootstrap 3 。我不能让导航栏与容器具有相同的宽度。如果它适用于大屏幕但不适用于其他屏幕尺寸。我如何制作固定大小的导航栏,它将改变与容器宽度相同的不同屏幕。
<div class="row"><!--Start row-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><!-- -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down">Menu</span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Course List</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--End Collapse-->
</div>
</nav><!--End Navbar-->
</div>
我对此的解决方法是简单地将container
类中的<nav class="...">
这将限制您的中殿栏的宽度由container
属性。
代码如下:
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top container" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><!-- -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down">Menu</span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Course List</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--End Collapse-->
</div>
</nav>
也没有必要为<nav>
被包裹在<div class="row">
我希望这就是您正在寻找的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)