ブートストラップでは、コンテナで包まれた列に流体や異なる背景色をどうやって取得するのですか？

Question

列に異なる背景を追加することはできますか？そのコンテナは変更されずに保持されますか？

は、この画像を見てみましょう：

Answer 1

をあなたは、ブートストラップ・コンテナ、および背景の描画処理に対応するコンテナを交換することによって行うことができます。

次のスニペットをフルスクリーンで表示してください。他のセクションの代わりに、コンテナがセクション内にどのようにあるかを確認してください。あなたのアプローチで

.background { 
 
    background-color: black; 
 
} 
 
#section1 { 
 
    background-color: blue; 
 
} 
 
#section2 { 
 
    background-color: white; 
 
} 
 
#section3 { 
 
    background-image: url(data:image/gif;base64,R0lGODlhgAcBAKECAJk40Dh80P///////yH5BAEKAAIALAAAAACABwEAAAJCjI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuKwHyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt74CADs=); 
 
    background-repeat: repeat-y; 
 
    background-position: center top; 
 
} 
 
#section4 { 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="background"> 
 
    <div class="container"> 
 
    <section id="section1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit aliquam eros, non commodo augue efficitur sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin gravida egestas tristique. Phasellus eget hendrerit dolor.</section> 
 
    <section id="section2">Ut mollis nunc aliquet libero scelerisque cursus. Sed velit felis, commodo tincidunt tortor ut, placerat lacinia ante. Pellentesque eu est vel magna facilisis dignissim. Fusce varius est viverra erat bibendum placerat.</section> 
 
    </div> 
 
    <section id="section3"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-xs-6">Nunc laoreet turpis sit amet mi condimentum semper. Fusce sit amet rutrum arcu, eget facilisis risus.</div> 
 
     <div class="col-xs-6">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce malesuada felis quis massa suscipit ultrices.</div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
    <div class="container"> 
 
    <section id="section4">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam vestibulum efficitur placerat. Integer egestas dapibus neque vel consectetur. Mauris eleifend commodo risus id pharetra.</section> 
 
    </div> 
 
</div>