html - 引导程序，我如何保持我的容器全宽屏幕

Question

我有以下代码，无论屏幕大小如何，导航栏都保持全宽......好！但是下面的宽度变小了：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

Answer 1

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

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

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

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