Twitter bootstrap 将容器流体与两种背景混合

我想从下面的图片中得到效果。 1,2,3节是div class=容器，但我不知道

---

据我所知，有两种方法可以实现你的形象结构

要使用

-offset-

类来进行填充，请执行以下操作：

  <div class="container">
       <div class="row">
          <div class="col-md-10 col-md-offset-1 narrow">A</div>
          <div class="col-md-10 col-md-offset-1 narrow">B</div>
          <div class="col-md-10 col-md-offset-1 narrow">C</div>
        </div>
   </div>

下面是一个工作示例：

如果屏幕不大，则在JSFIDLE中拉伸窗口以查看 效果

---

您想在一个容器内还是多个容器内构建它？这是一个不错的解决方案，但如何使D和F相对于其余容器对齐，您可以从左到右填充，使其等于从上到下的div边距（等于

col-md-offset-1

）。换句话说，

左侧填充：8.33333%

和

右侧填充：8.33333%

 <div class="container">
    <div class="row">
    <div class="col-md-12 col-xs-12 narrow">A</div>
    <div class="col-md-12 col-xs-12 narrow">B</div>
    <div class="col-md-12 col-xs-12 narrow">C</div>
   </div>
 </div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-xs-6 wide">D</div>
        <div class="col-md-6 col-xs-6 wide">E</div>
    </div>
    <div class="row">
        <div class="col-md-6 col-xs-6 wide">F</div>
        <div class="col-md-6 col-xs-6 wide">G</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12 col-xs-12 narrow">H</div>
        <div class="col-md-12 col-xs-12 narrow">I</div>
        <div class="col-md-12 col-xs-12 narrow">J</div>
    </div>
</div>