如何使div跨越屏幕的整個寬度

Question

我正在做一個小項目，但我似乎無法正確地使CSS正確...我需要標頭div（我希望使用常規div而不是實際的標頭，因為我想要體內的所有東西）。 我希望藍色標題橫穿我的整個屏幕，但我只是不知道如何。 我嘗試了一些用邊距和填充的方法，但是僅此而已。

我也嘗試將這些按鈕放到Div的底部，但似乎無法正確處理...

屏幕快照： http : //prntscr.com/9slfw2說明：在這里查看我的網站

CSS：

body {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style-type: none;
}

.page-header{
    background-color: #0094ff;
    margin-top: 0px;
    display: block
}


.panel, .list-group-item, .btn {
    border-color: #0094ff;
}

#btnRegister {
    margin-right: 10px;
    vertical-align: bottom;
}

.input-group-addon {
    min-width: 40px;
}

legend.scheduler-border {
    width:inherit;
    padding:0 10px;
    border-bottom:none;
}

HTML：

<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Items -->
    <div class="carousel-inner">

        <!-- Item 1 -->
        <div class="item active">
            <img class="c_img" src="~/Images/chevy.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Contact</h1>
                    <p style="background-color:#428bca;">Om gemakkelijk met Rent-a-Car contact op te nemen kunt u ook bellen!</p>
                    <p style="background-color:#428bca;">Tel: 0534891034, Adres: Vuurnatieweg 69420</p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="~/Home/Contact" >Klik hier voor meer contact informatie!</a>
                    </p>
                </div>
            </div>
        </div>

        <!-- Item 2 -->
        <div class="item">
            <img class="c_img" src="~/Images/42-RT-76.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Changes to the Grid</h1>
                    <p style="background-color:#428bca;">Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
                    <p style="background-color:#428bca;"><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
                </div>
            </div>
        </div>

    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
    <div id="carouselButtons">
        <button id="playButton" type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-play"></span>
        </button>
        <button id="pauseButton" type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-pause"></span>
        </button>
    </div>
</div>

<script type="text/javascript">
    $(function () {
    $('#homeCarousel').carousel({
        interval:5000,
        pause: "false"
    });
    $('#playButton').click(function () {
        $('#homeCarousel').carousel('cycle');
    });
    $('#pauseButton').click(function () {
        $('#homeCarousel').carousel('pause');
    });
});
</script>

編輯：HTML代碼和..我正在使用Bootstrap，只是您知道

Answer 1

問題是您正在使用Bootstrap，如HTML中的類和明確的編輯所示。 Bootstrap添加了自己的樣式（很明顯）。

特別地， .container類具有填充，邊距和固定寬度，這將防止您的布局跨越整個屏幕。 如果操作正確，則.row <div>標記位於容器中。

您可以通過以下兩種方法解決此問題：

1. 使用.container-fluid而不是.container **

   這是首選選項。

2. 覆蓋默認的.container CSS規則

   要覆蓋它，請為.container添加規則，如下所示：

    .container { padding-left: 0px; padding-right: 0px; margin-right: 0px; margin-left: 0px; width: 100%; } 

   這是一個帶有Bootstrap的默認CSS的示例， 一個帶有.container調整的.container 。

   注意：如果只想覆蓋一個.container ，只需為其提供自己的類或ID， .container在CSS中使用適當的選擇器代替.container 。

Answer 2

如果您使用的是引導程序，則可以使用.container-fluid而不是.container來獲得全角容器。

另外，您似乎混合了頭部（不在主體中）和標題（在主體中）。 標題標簽的更多信息： https : //developer.mozilla.org/en/docs/Web/HTML/Element/header

Answer 3

您的代碼確實跨度

在這里看看演示