Question

我有一个使用bootstrap的网站，其中包含所有主要内容的div都有一类容器。这是因为我的网站不会拉伸整个页面并且以固定宽度居中。但是，在我的主要内容的某些部分中，我希望背景能够覆盖整个页面的宽度。

基本上我想要做的是尝试使用id rowWith100PercentBG为div中的内容提供跨越整个屏幕的背景：

<div id="mainWrapper" class="container">
    <div id="rowWith100PercentBG" class="row container-fluid">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

这是我所拥有的jsFiddle： https://jsfiddle.net/jyh359mh/

缺少的部分是我需要在第1部分后面的橙色背景，横跨整个画面的宽度和第2部分后面的红色背景，横跨整个屏幕宽度。通过横跨屏幕的整个宽度，我的意思是覆盖两侧的黑色，但仍然在部分内容的后面。每个部分都需要自己的bg。

Answer 1

将容器液体放在外面，将行放在

中

<div id="mainWrapper" class="container-fluid">
<div id="rowWith100PercentBG" class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

＆＃13;

    #mainWrapper{
    background-color:black;
    height: 200px;
}

#rowWith100PercentBG{
    height: 100px;
    background-color:Green;
}

＆＃13;

JS Fiddle Demo

将跨越页面整个宽度的css背景添加到具有boostrap容器类的div的内容

1 个答案: