Bootstrap 3 1.5列偏移

Question

我正在努力想出一个Bootstrap 3网格布局，其中顶行有4列，底部有3列以第一列为中心，如此...

我已经看过使用偏移但是因为它们的底行需要使用1.5列的左偏移它不起作用。

有没有人有类似的工作示例我可以看一下？

Answer 1

我为这样的组织结构图做了类似的事情：

HTML

<div class="container">
    <div class="row">
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
    </div>
    <div class="row center-boxes">
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
    </div>
 </div>

CSS

  .container{
    background:#ccc;
  }

  .box{
    background: gray;
    height:50px;
    text-align:center;
    padding:15px;
    border:1px solid black;
  }

  .center-boxes div{
     margin:0 -4% 0 4%;
  }

*这仅满足桌面视图，相应地调整为较小的设备，直到最终得到col-xs-12，此时偏移量（推送）无关紧要

使用margin:0 -4% 0 4%;

需要在1024px和991px上进行一些@media查询调整

查看工作演示here