Question

不是this的重复。

我尝试在网页上创建两列具有不同的背景颜色，这些颜色延伸到屏幕边缘。但是列的内容需要保持在引导盒装宽度内。

应该如下所示：

我发现this answer几乎有效，但内部内容未在盒装宽度内正确对齐，尤其是在1600px以上的大屏幕上。它基本上看起来像：

下面是我可以使用它的最接近的代码片段，它可能完全是错误的方法：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
	<div class="row">
		<div class="col-xs-12">
			<h1>Normal Boxed Width</h1>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row" style="background-color: aquamarine; padding: 0">
		<div>
			<div class="col-sm-8 col-sm-offset-1">
                <h1>Left Panel</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
			</div>
			<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
              <h1>Right Panel</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
			</div>
		</div>
	</div><!--  .row -->
</div><!--  .container-fluid -->

＆＃13;

Answer 1

在第二个容器周围使用另一个包装器DIV ......

<div class="container" style="background: bisque;">
    <div class="row">
        <div class="col-xs-12">
            <h1>Normal Boxed Width</h1>
        </div>
    </div>
</div>
<div style="background-color: aquamarine; padding: 0">
    <div class="container">
        <div class="row">
            <div>
                <div class="col-sm-9">
                    <h1>Left Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
                </div>
                <div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
                    <h1>Right Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
                </div>
            </div>
        </div>
        <!--  .row -->
    </div>
    <!--  .container-fluid -->
</div>

<强> 修改

使用psuedo元素，例如..

.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

http://www.codeply.com/go/YssQ5T7pxq

Updated Bootstrap 4 example

类似的问题： Bootstrap container fill sides with colors

获取具有不同背景颜色的两列，这些颜色延伸到屏幕边缘

1 个答案: