混合容器 - 液体有两个背景

Question

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

Answer 1

据我了解你的帖子，有两种方法可以实现你的形象结构。

1. 使用-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>
   

这是小提琴：http://jsfiddle.net/johannesMt/fnj286ew/1/

1. 根据宽度将container和container-fluid类应用于各个部分。如果您想要从左侧和右侧填充，请使用container，如果您想要全宽，请使用container-fluid。

这样的事情：

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

以下是工作示例：

  

如果您的屏幕不大，那么在jsfiddle中拉伸窗口以查看   效果。

http://jsfiddle.net/johannesMt/BMY36/125/