bootstrap,我如何保持我的容器全屏宽度

时间:2013-04-08 10:24:31

标签: html css twitter-bootstrap

我有以下代码,无论屏幕尺寸如何,导航栏都保持全宽...好! 但下面的一个是宽度: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

enter image description here

1 个答案:

答案 0 :(得分:4)

您需要覆盖媒体查询。创建custom.css(any-name.css)。在其中添加此代码。

@media (max-width: 767px)
{
    body {
        padding-right: 0px;
        padding-left: 0px;
    }
}

现在它应该将容器粘贴到浏览器宽度。

重要提示 - 切勿在现有样式表中进行任何更改。改为覆盖它: - )