html - 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>