Bootstrap列不居中

Question

我希望将4个额外的小型引导列放在彼此旁边。

但是，当我这样做时，它并不会使它们居中。

我尝试使用margin: 0 auto;方法将它们集中在一起但是没有用。

我也试过了text-align: center;，但这也没有用。

还有bootstrap中的内置center-text类。

我在所有父div上尝试了所有这些方法。

现在就是这样：

这就是我想要的：

这是我现在的代码：

<div class="gallery-filter">
    <div class="row">
        <div class="col-xs-2">
            <p>
                All
            </p>
        </div>
        <div class="col-xs-2">
            <p>
                Area
            </p>
        </div>
        <div class="col-xs-2">
            <p>
                Resort
            </p>
        </div>
        <div class="col-xs-2">
            <p>
                Rinjani
            </p>
        </div>
    </div>
</div>

.gallery-filter > .row {
    margin-right: 0px !important;
}

.gallery-filter {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
}

Answer 1

尝试bootstrap文本中心类：

<div class="col-xs-3 text-center">
     <p>
         All
     </p>
</div>
<div class="col-xs-3 text-center">
     <p>
         Area
     </p>
</div>
<div class="col-xs-3 text-center">
     <p>
         Resort
     </p>
</div>
<div class="col-xs-3 text-center">
     <p>
         Rinjani
     </p>
</div>

如果仍然无法工作，请尝试删除p标签
http://codepen.io/anon/pen/BLkoNA