如何讓Jumbotrons不要垂直接觸？

Question

基本上，我的圖像垂直觸摸，我想他們之間的一些間距。我最近想出瞭如何避免它們與Margin: 0 auto;水平接觸，但這會使圖像仍然垂直地觸摸。我會想象這是一個簡單的修復。對我有何建議？

HTML：

<div class="four"> 
    <div class="col-sm-4"> 
    <div class="jumbotron text-center"> 
     <a href="#" class="btn btn-xs btn-default">→</a> 
    </div> 
</div> 
</div> 
<div class="four"> 
    <div class="col-sm-4"> 
    <div class="jumbotron text-center"> 
     <a href="#" class="btn btn-xs btn-default">→</a> 
    </div> 
</div> 
</div> 
<div class="four"> 
    <div class="col-sm-4"> 
    <div class="jumbotron text-center"> 
     <a href="#" class="btn btn-xs btn-default">→</a> 
    </div> 
</div> 
</div> 
<div class="four"> 
    <div class="col-sm-4"> 
    <div class="jumbotron text-center"> 
     <a href="#" class="btn btn-xs btn-default">→</a> 
    </div> 
</div> 
</div> 

CSS：

.four .jumbotron 
{ background: url("http://cdn3.bigcommerce.com/s-zsusy2wy/products/2030/images/2051/IMG_0008_1__60351__59072.1453225152.330.385.jpg?c=2") no-repeat center center; 
-webkit-background-size: 100% 100%; 
-moz-background-size: 100% 100%; 
-o-background-size: 100% 100%; 
background-size: 100% 100%; 
min-width: 220px; 
max-width:250px; 
min-height:260px; 
max-height:300px; 
margin: 0 auto; 
} 

Answer 1

在

CSS其通過多種方法來確定在元件的每一側的餘量。讓我們首先舉例說明一個保證金可以這樣寫margin: 5px 4px 7px 10px;意思是右上方左下角margin: {TOP} {RIGHT} {BOTTOM} {LEFT}。您也可以單獨拿走每個號碼，以分享相反的值。

當刪除每個單獨的號碼時，刪除的「側」將與其相反（頂部：底部，左側：右側）共享值。例如，margin: 5px 4px 4x將意味着top = 5px，right = 4px，bottom = 4px，left = 4px。另一個例子是當除去一個時，例如：margin: 10px。這意味着top = 10px，right = 10px，bottom = 10px，left = 10px。

現在，當您添加auto代替第二個數字時，例如margin: 10px auto。現在可以製作左側和右側以及自動寬度，這將允許您水平放置物品。

隨着你的情況，你正在尋找一個保證金在右下角和左側。

答案：margin: 0px 10px 10px。