Question

我正在使用最新的Bootstrap 3来为朋友起草一个网站，我在网页上有一个问题。通常我会做这样的事情：

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

但这没有效果。

我想要做的是将桌面视图设置为：

item    item    item
    item    item

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

item    item
item    item
    item

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

您可以查看网站here。

Answer 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

Answer 2

首先在你的CSS中：

.center{text-align: center;}

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

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

请记住，您希望Bootstrap在平板电脑上将最后一列调整为全宽，平板电脑尺寸为sm-，因此您需要为平板电脑和更小的平板电脑添加{{1}}。

Answer 3

bootstrap内置了此实用程序。

 <div class="centered">

Bootstrap行居中问题

3 个答案: