爲什麼我的引導頁邊距不同？

Question

有人可以解釋爲什麼我的左邊距與右邊的大小不同嗎？

<div class="container-fluid"> 
    <div class="row"> 

      <div class="col-sm-4 col-md-4 col-lg-4"> 
       <button class="tab-button tab-yellow">One</button> 
      </div> 

      <div class="col-sm-4 col-md-4 col-lg-4"> 
       <button class="tab-button tab-green">Two</button> 
      </div> 

      <div class="col-sm-4 col-md-4 col-lg-4"> 
       <button class="tab-button tab-blue">Three</button> 
      </div> 
    </div> 
</div> 

https://jsfiddle.net/phpMick/e51t1fs8/

感謝，

米克

Answer 1

必須封裝一個div按鈕內，並使用margin。如果您從外部執行操作，則移動col- *的輪廓。最好是在這些因素把他們<div>內，藉口一類

例

HTML

<div class="col-sm-4 col-md-4 col-lg-4"> 
    <div class="margin"> 
     <button class="tab-button tab-yellow">One</button> 
    </div> 
</div> 

CSS

.tab-button { 

    border: none; 
    color: #080906; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    cursor: pointer; 
    font-size: 32px; 
    border-radius: 8px; 

    width: 100%; 
    height: 100px; 

    cursor: pointer; 
} 

.margin{ 
     margin: 10px 25px; 
} 

jsfiddle

Answer 2

發生了什麼事是您25個按鈕上的自定義左邊距px，將Bootstrap列之外的按鈕按下「太遠」。這將是更好地使用保證金這樣的..

margin: 10px auto;

http://www.codeply.com/go/DvflVK1ypd