Question

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

（换句话说，创建一个1.5列）

<div class="container""
    <div class="row">
        <div class="col-sm-3">
            1
        </div> <!-- close .col -->
        <div class="col-sm-3">
            2
        </div> <!-- close .col -->
        <div class="col-sm-3">
           3
        </div> <!-- close .col -->
        <div class="col-sm-3">
            4
        </div> <!-- close .col -->
    </div><!-- close .row-->
    <div class="row">
        <div class="col-sm-3 col-sm-offset-1">
            5
        </div> <!-- close .col -->
        <div class="col-sm-3">
            6
        </div> <!-- close .col -->
        <div class="col-sm-3">
            7
        </div> <!-- close .col -->
    </div><!-- close .row-->
</div><!-- close container -->

Answer 1

由于你基本上偏移了1.5，你可以像这样创建自己的偏移类：

.col-sm-offset-1point5 {
    margin-left: 12.5%;
}

请注意，12.5％是1.5行偏移的行宽度的八分之一。现在将其应用到第二行的第一列（将col-sm-offset-1替换为col-sm-offset-1point5）

此处示例： http://www.bootply.com/1rBTZPGsYu

Answer 2

另一种方式是：

Bootply ：http://www.bootply.com/NWkWutLI8M

<强> CSS ：

.centered{
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    float: none; 
  }

<强> HTML ：

<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>

Bootstrap：两行中七个相同大小的列

2 个答案: