Bootstrap - 50％的背景與正常的容器

Question

我有問題。我想在例子中做一些事情： - 一列內容+一列背景 - 兩列內容和其中一個背景

問題是 - 我使用的是正常容器，而不是流體。我應該爲背景使用單獨的DIV並使用絕對位置嗎？誠實 - 我不喜歡這個想法。

我當前的代碼：

<div class="container"> 
    <div class="bg" style="position:absolute;top:0;left:0;width:50%;height:500px;"> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <h1>Test Content col-lg-6</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam mauris quis arcu pretium, quis lacinia odio lobortis. Mauris a tellus turpis. Fusce pretium enim eget lorem sodales lacinia non sed metus. Donec quis varius enim. Phasellus vitae sapien congue, convallis justo eu, pharetra turpis. Sed a augue et nulla sodales aliquet. Aenean id nulla vitae odio tincidunt placerat. Etiam pharetra, lorem a sollicitudin ultricies, elit lectus vehicula lectus, ac molestie risus nibh quis velit. Sed accumsan aliquet orci eu commodo. Nam consectetur lacinia tempus.</p> 
    </div> 
    <div class="col-lg-6"> 
     <h1>Test Content col-lg-6</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam mauris quis arcu pretium, quis lacinia odio lobortis. Mauris a tellus turpis. Fusce pretium enim eget lorem sodales lacinia non sed metus. Donec quis varius enim. Phasellus vitae sapien congue, convallis justo eu, pharetra turpis. Sed a augue et nulla sodales aliquet. Aenean id nulla vitae odio tincidunt placerat. Etiam pharetra, lorem a sollicitudin ultricies, elit lectus vehicula lectus, ac molestie risus nibh quis velit. Sed accumsan aliquet orci eu commodo. Nam consectetur lacinia tempus.</p> 
    </div> 
    </div> 
</div> 

任何想法？對不起我的英語不好。

Answer 1

如果你想保持在排，我建議這種佈局（沒有位置絕對）

<div class="container"> 
    <div class="row"> 
     <div id="my_background_img" class="col-lg-6"> <! --you can add your background to this div -- eventually using adn id and a ccs external styling> 
     </div> 
     <div vclass="col-lg-6"> 
      <h1>Test Content col-lg-6</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam mauris quis arcu pretium, quis lacinia odio lobortis. Mauris a tellus turpis. Fusce pretium enim eget lorem sodales lacinia non sed metus. Donec quis varius enim. Phasellus vitae sapien congue, convallis justo eu, pharetra turpis. Sed a augue et nulla sodales aliquet. Aenean id nulla vitae odio tincidunt placerat. Etiam pharetra, lorem a sollicitudin ultricies, elit lectus vehicula lectus, ac molestie risus nibh quis velit. Sed accumsan aliquet orci eu commodo. Nam consectetur lacinia tempus.</p> 
     </div> 
    </div> <!-- end first row --> 
    <div class="row">  
     <div class="col-lg-6"> 
      <h1>Test Content col-lg-6</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam mauris quis arcu pretium, quis lacinia odio lobortis. Mauris a tellus turpis. Fusce pretium enim eget lorem sodales lacinia non sed metus. Donec quis varius enim. Phasellus vitae sapien congue, convallis justo eu, pharetra turpis. Sed a augue et nulla sodales aliquet. Aenean id nulla vitae odio tincidunt placerat. Etiam pharetra, lorem a sollicitudin ultricies, elit lectus vehicula lectus, ac molestie risus nibh quis velit. Sed accumsan aliquet orci eu commodo. Nam consectetur lacinia tempus.</p> 
     </div> 
     <div class="col-lg-6"> 
      <h1>Test Content col-lg-6</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam mauris quis arcu pretium, quis lacinia odio lobortis. Mauris a tellus turpis. Fusce pretium enim eget lorem sodales lacinia non sed metus. Donec quis varius enim. Phasellus vitae sapien congue, convallis justo eu, pharetra turpis. Sed a augue et nulla sodales aliquet. Aenean id nulla vitae odio tincidunt placerat. Etiam pharetra, lorem a sollicitudin ultricies, elit lectus vehicula lectus, ac molestie risus nibh quis velit. Sed accumsan aliquet orci eu commodo. Nam consectetur lacinia tempus.</p> 
     </div>  
    </div> <!-- end second row --> 
</div>