Question

这就是我想要实现的目标：http://i.imgur.com/n91OYWN.png

如何使用bootstrap构建上述布局？左侧部分（2 col）和右侧有1个col，我将它们着色以便您可以看到。

问题是这不是静态网站。所以这是标记的内容

<div class="row">
    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        orange
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        white
    </div>

    <div class="col-lg-4">
        orange
    </div>

</div>

橙色和白色将在移动设备中混淆，上面的标记很难维护，因为我必须使用php循环显示白色框的内容。

Answer 1

使用一个包含三个子rows的{{1}}，而不是使用多个row。

divs

可以动态生成孩子<div class="row"> <div class="col1 col-lg-4" id="left"> <div>White 1</div> <div>White 1</div> <div>White 1</div> <div>White 1</div> </div> <div class="col2 col-lg-4" id="middle"> <div>White 2</div> <div>White 2</div> <div>White 2</div> <div>White 2</div> </div> <div class="col3 col-lg-4" id="right"> <div>Orange</div> <div>Orange</div> </div> </div>（divs，White 1和White 2），并将其正确插入目标（Orange，{{ 1}}，#left）代码（PHP或JS）。

Answer 2

使用bootstrap 3附带的push和pull类非常容易。

DEMO：http://jsbin.com/riniri/1/

在小视口（在col-lg-类下）上面会有橙色，当它在最小宽度或更大时会在右边。

  <div class="container">
     <div class="row">
        <div class="col-lg-4 col-lg-push-8">
           <div class="box orange"></div>
           <div class="box orange"></div>
        </div>
        <div class="col-lg-8  col-lg-pull-4">
           <div class="row">
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
              <div class="col-lg-6">
                 <div class="box"></div>
              </div>
           </div>
        </div>
     </div>
  </div>

仅限DEMO CSS：

.box {width:100%;height:300px;margin-bottom:30px;border:5px solid #000}
.orange {background:orange}

右侧边栏的引导程序布局标记

2 个答案:

DEMO：http://jsbin.com/riniri/1/