获取具有不同背景颜色的两列，这些颜色延伸到屏幕边缘[重复](Get Two Columns with different background colours that extend to screen edge [duplicate])

 
 
 这个问题在这里已有答案： 
 
 
 
  
 Bootstrap全宽2个不同背景（和2列） 2个答案 
 
  
 在容器 4 外面扩展bootstrap行 答案 
 
 
 
 
 与此不重复。 
 
 我试图在网页上创建两列具有不同的背景颜色，延伸到屏幕边缘。 但是列的内容需要保持在引导盒装宽度内。 
 
 它应该如下所示：  
 
 我发现这个答案几乎有效，但内部内容未在盒装宽度内正确对齐，特别是在1600px以上的大屏幕上。 它基本上看起来像： 
 
  
 
 下面是我可以使用的最接近的代码片段，它可能完全是错误的方法： 
 
 
 
 
 
  
<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 -->
 
 
 
 

 
 
This question already has an answer here:
 
 
 
  
 Bootstrap full-width with 2 different backgrounds (and 2 columns)  2 answers  
 
  
 Extend bootstrap row outside the container  4 answers  
 
 
 
 
Not a duplicate of this.
 
I trying to create two columns on a webpage have different background colours that extend to the screen edges. But the content of the columns needs to stay within the bootstrap boxed width.
 
It should look like this: 
 
I found this answer which almost worked but the inner content wasn't correctly aligned within the boxed width, especially on large screens over 1600px. It basically ended up looking like:
 
 
Below, is a code snippet of the closest I could get to it working, it may be the wrong approach entirely:
 
 
 
 
 
  
<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 -->
 
 
 
 

原文：https://stackoverflow.com/questions/41507852