Question

我正在尝试将我使用bootstrap创建的行中的7个内联列居中。我已经尝试了我能找到的所有解决方案（除了绝对定位，我不想要）。我最初的计划是在col-md-1 div的列表周围添加一个额外的容器div，但是当我这样做时，div将自己设置为适合行的100％而不是仅仅100％的宽度。 COLS。我的代码如下：

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-12" style="background-color: pink;">
            <div class="row">
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
                <div class="col-md-1">
                    Hello
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.container .row .col-md-12 .row {
    text-align: center;
}
.col-md-1 {
    width: 125px;
    height: 80px;
    margin-right: 7px;
    background-color: #E6E6E6;
    display: inline-block;
}
.col-md-1:last-child {
    margin-right: 0;
}

此外，这是一个bootply：

http://www.bootply.com/116478

Answer 1

您需要哪些浏览器支持？如果没有IE9就能生存 - 使用Flexbox很容易：

http://www.bootply.com/116480

.container .row .col-md-12 .row {
    display: flex;
    justify-content: center;
}

当然，现实并非那么简单。您需要Safari的-webkit-前缀，IE10的不同语法（IE11使用现代语法）和旧版本的Firefox（带-moz-前缀）和Safari / Chrome（-webkit）的不同语法。根据您需要走的距离，选择并选择。

Answer 2

这是因为默认样式会在列中添加float: left;，如下面的代码段所示：

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

从我的观点来看，使列居中的最佳方法是使用offset。这样可以防止您对Bootstrap的网格造成意外的后果。

无法在bootstrap 3中居中多个col

2 个答案: