css 横幅 画面の端まで広がる異なる背景色の2つの列を取得する



css 背景色 横いっぱい (1)

2番目のコンテナの周りに別のラッパー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>

編集

などの擬似要素を使用します。

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

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

更新されたBootstrap 4の例

同様の質問: ブートストラップコンテナーは色で側面を塗りつぶします

this 複製ではありません。

Webページに2つの列を作成しようとすると、画面の端まで広がる異なる背景色が使用されます。 ただし、列のコンテンツは、ブートストラップのボックス幅内に収まる必要があります。

次のようになります。

this はほとんど機能していましたが、特に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 -->





twitter-bootstrap