html - 右侧边栏的 Bootstrap 布局标记

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

使用 bootstrap 3 附带的推和拉类很容易做到这一点。

演示:http://jsbin.com/riniri/1/

这将在小视口(viewport)(在 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>

仅演示 CSS:

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