引导行居中问题答案

【问题标题】：Bootstrap Row Centering Issue引导行居中问题
【发布时间】：2014-08-19 08:04:14
【问题描述】：

我正在使用最新的 Bootstrap 3 为朋友起草一个网站，但在页面上将项目居中时遇到了问题。通常我会这样做：

.center{
    width: 90%;
    margin: 0 auto;
}

但这没有任何效果。

我想要做的是这样设置桌面视图：

item    item    item
    item    item

并拥有这样的平板电脑视图

item    item
item    item
    item

但我得到的结果是所有项目都向左移动。

您可以查看网站here。

【问题讨论】：

.center{text-align: center;}

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

【解决方案1】：

首先，你的行需要被.container包围

其次，要实现这一点，只需为您的列做偏移？

所以我通常会这样做：

.row
   .col-md-4.text-center    //.text-center  is to center your text and image within the column
   .col-md-4.text-center
   .col-md-4.text-center

.row
   .col-md-4.col-md-offset-2.text-center
   .col-md-4.text-center

【讨论】：

这是一个令人尴尬的简单修复！我现在很惭愧，我没想过要调整网格。非常感谢。
没问题，我很高兴：D

【解决方案2】：

首先在你的 CSS 中：

.center{text-align: center;}

然后在您的 HTML 中，将最后一列更改为

<div class="col-md-4 col-sm-12 col-xs-12">

请记住，您希望 Bootstrap 在平板电脑上将最后一列调整为全宽，并且平板电脑大小为 sm-，因此您需要为任何平板电脑和更小的平板电脑添加 sm-12。

【讨论】：

我在自嘲这个修复是多么容易。谢谢。

【解决方案3】：

bootstrap 内置了这个实用程序。

 <div class="centered">

【讨论】：