无法在引导程序 3 中居中多个列答案

【问题标题】：Unable to center multiple col's in bootstrap 3无法在引导程序 3 中居中多个列
【发布时间】：2014-02-25 07:48:50
【问题描述】：

我正在尝试在我使用引导程序创建的一行中将 7 个内联列居中。我已经尝试了所有我能找到的解决方案（除了绝对定位，我不想要）。我最初的计划是在 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;
}

另外，这是一个引导：

http://www.bootply.com/116478

【问题讨论】：

我真的不想闯入 bootstrap.css 文件，但我不反对在我的单独样式表中更改 col-md-1，所以我就是这样做的。我以前试过这个但没有成功，但我一定有 float: none;附加到不同的班级，因为这次它工作得很好！感谢您的帮助！

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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) 需要不同的语法。只需根据您需要走多远进行选择。

【讨论】：

【解决方案2】：

这是因为默认样式将float: left; 添加到列中，如下面的 sn-p 所示：

.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 的网格造成意外的行为。

【讨论】：