我有以下代码,无论屏幕尺寸如何,导航栏都保持全宽...好! 但下面的一个是宽度:708,当它变小,我只想要它也是100%。
<div class="navbar navbar-static-top" id="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"><img style="height:20px; padding: 0px; margin: 0px;" src="<?php echo Site::$imageFolder; ?>logo.png" alt="logo" /></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right topRightIcons">
<li class="active"><a href="#"><i class="icon-user icon-white"></i></a></li>
<li><a href="#about"><i class="icon-eject icon-white"></i></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- THIS ONE HERE -->
<div class="row-fluid" id="topBar">
<div class="span12">
<p class="nav-text pull-right"><img src="http://placehold.it/15x15" alt="Your company logo"> Welcome ClientName</p>
</div>
</div>
#topBar is purely for colour, as is #navigation
答案 0 :(得分:4)
您需要覆盖媒体查询。创建custom.css(any-name.css)。在其中添加此代码。
@media (max-width: 767px)
{
body {
padding-right: 0px;
padding-left: 0px;
}
}
现在它应该将容器粘贴到浏览器宽度。
重要提示 - 切勿在现有样式表中进行任何更改。改为覆盖它: - )