Twitter bootstrap 引导:两行中有七个大小相同的列

Twitter bootstrap 引导:两行中有七个大小相同的列,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,关于如何保持每列大小相同但第二行居中的想法 (换句话说,创建一个1.5列) 由于基本上偏移量为1.5,因此可以创建自己的偏移量类,如下所示: .col-sm-offset-1point5 { margin-left: 12.5%; } 请注意,12.5%是行宽度的八分之一,即1.5列偏移量。现在将其应用于第二行的第一列(将col-sm-offset-1替换为col-sm-offset-1点5) 示例如下: 另一种方法是: Bootply: CSS: .centered{ rig

关于如何保持每列大小相同但第二行居中的想法

(换句话说,创建一个1.5列)


由于基本上偏移量为1.5,因此可以创建自己的偏移量类,如下所示:

.col-sm-offset-1point5 {
    margin-left: 12.5%;
}
请注意,12.5%是行宽度的八分之一,即1.5列偏移量。现在将其应用于第二行的第一列(将
col-sm-offset-1
替换为
col-sm-offset-1点5

示例如下: 另一种方法是:

Bootply

CSS

.centered{
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    float: none; 
  }
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            1
        </div> 
        <div class="col-sm-3">
            2
        </div> 
        <div class="col-sm-3">
           3
        </div> <!-- close .col -->
        <div class="col-sm-3">
            4
        </div>
    </div>
    <div class="row">
      <div class="col-xs-9 centered">
        <div class="row">

            <div class="col-sm-4">
                5
            </div>
            <div class="col-sm-4">
               6
            </div>
            <div class="col-sm-4">
                 7
            </div>
        </div>      
      </div>
    </div>
</div>
HTML

.centered{
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    float: none; 
  }
<div class="container">
    <div class="row">
        <div class="col-sm-3">
            1
        </div> 
        <div class="col-sm-3">
            2
        </div> 
        <div class="col-sm-3">
           3
        </div> <!-- close .col -->
        <div class="col-sm-3">
            4
        </div>
    </div>
    <div class="row">
      <div class="col-xs-9 centered">
        <div class="row">

            <div class="col-sm-4">
                5
            </div>
            <div class="col-sm-4">
               6
            </div>
            <div class="col-sm-4">
                 7
            </div>
        </div>      
      </div>
    </div>
</div>

1.
2.
3.
4.
5.
6.
7.

是否希望第1行的前两列与第2行的第一列匹配?实际上,第一行的形状已经正确,但我希望第二行居中,遵循以下结构:第1行:第3行第2行:1.5 3 1。5@DavidG谢谢你的例子,但正如你在上面看到的,对于简单的禅宗解决方案,第6列与第2列和第3列+第1列相比没有很好地居中。是的,一个类添加了一种样式。禅宗是关于合一的。我想我会去做一些禅宗冥想,希望我今天能得到额外的11次重复,达到200次!你是我新的最爱!善有善报。因果报应和禅宗一样。。。