Question

我正在设计中，需要在中心对齐行项目。如果我有一个预定义数量的列，那么很容易对齐它们，但我有一个动态数量的列，我不知道如何对齐它们。所以内容应该是以下示例：

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

或者

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

    |----| |----|
    |    | |    |
    |----| |----|

或

|----| |----| |----|
|    | |    | |    |
|----| |----| |----|

       |----|
       |    |
       |----|

在我的HTML我实现了这段代码：

<div class="row row-centered">
    <!-- Loop here to make the dynamic amount of columns -->
    <div class="col-xs-12 col-sm-4 col-centered text-center">
    </div>
    <!-- End the loop here -->
</div>

在我的SASS我有这段代码：

.row-centered {
    text-align : center;

    .col-centered {
        display      : inline-block;
        float        : none;
        /* reset the text-align */
        text-align   : left;
        /* inline-block space fix */
        margin-right : -4px;
    }
}

但这给了我这个结果：

|----| |----|
|    | |    | |----|
|----| |----| |    |
              |----|
|----| |----|
|    | |    | |----|
|----| |----| |    |
              |----|

或者

|----| |----| 
|    | |    | |----|
|----| |----| |    |
              |----|
           |----|
    |----| |    |
    |    | |----|
    |----|

或

|----| |----| 
|    | |    | |----|
|----| |----| |    |
              |----|
       |----|
       |    |
       |----|

那么，有没有其他方法可以在不制动柱的情况下实现相同的对齐？

注意：项的行也是不知道的，可以是一行，两行或数千行。为了简单起见，我最多使用了两行项目。

Answer 1

您需要将vertical-align:top;添加到所有框中。这将使它们在同一位置对齐。

Answer 2

使用引导程序4并使用card-deck

如何在中心对齐Bootstrap列？

2 个答案: