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>标记位于容器中。

您有两种方法可以解决此问题：

使用.container-fluid代替.container **

这是首选方案。
覆盖默认的.container CSS规则

要覆盖它，请为.container添加规则，如下所示：
```
.container {
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
}
```
此处为a sample with Bootstrap's default CSS和one with the .container tweaks above。

注意：如果您只想覆盖一个.container，只需给它自己的类或ID，并在CSS中使用适当的选择器而不是.container。

Answer 2

如果您使用的是bootstrap，则可以使用.container-fluid代替.container来获取全宽容器。

此外，你似乎混合头（不在体内）与标题（在体内）。有关标题标记的更多信息：https://developer.mozilla.org/en/docs/Web/HTML/Element/header

Answer 3

您的代码确实跨越了

在这里查看Demo

如何使div跨越屏幕的整个宽度

3 个答案: