html - 无法在 bootstrap 3 中将多个列居中

Question

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

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) 的不同语法。只需根据您需要返回多远进行选择即可。