引导程序中的金字塔网格

Noitidart 发表于 Dev

诺蒂达特

我正在使用Bootstrap3制作3列网格。看起来像这样：

但是，看到那些只有两个框和一个框的行。我想尝试看看如果没有3个完整的盒子，它将看起来如何居中。

我通过添加display:flex; justify-content:center;到.row类中来完成此操作，但这不是真正的引导方式。我想知道真正的引导方式是什么。

这是我的代码：

<div class="padd-80">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
  </div>
</div>
<div class="padd-80">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
  </div>
</div>
<div class="padd-80">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
  </div>
</div>

谢谢

凯恩·伯拉克·塞纳（Kaan Burak Sener）

试试这个：

<div class="padd-80">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
  </div>
</div>
<div class="padd-80">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
    <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
  </div>
</div>
<div class="padd-80">
  <div class="row">
    <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
      ....
    </div>
  </div>
</div>