引導柱不居中

Question

我想將4個額外的小引導柱相互靠近。

但是，當我這樣做，它只是不居中。

我試圖用margin: 0 auto;方法將它們居中，但沒有奏效。

我也試過text-align: center;但也沒有工作。

而且還內置在center-text類的bootstrap。

我在所有父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> 

如果仍然doen't工作嘗試刪除p標籤
http://codepen.io/anon/pen/BLkoNA