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}。您也可以单独拿走每个号码，与其分享价值。

删除每个单独的号码时，删除的＆＃34;侧面＆＃34;将与它分享价值（顶部：底部，左侧：右侧）。例如margin: 5px 4px 4x，意味着顶部= 5px，右边= 4px，底部= 4px，左边= 4px。另一个例子是删除除一个之外的所有内容，例如：margin: 10px。这意味着top = 10px，right = 10px，bottom = 10px，left = 10px。

现在，当您添加auto代替第二个号码时，例如margin: 10px auto。这将使左侧和右侧和自动宽度，这将允许您水平居中项目。

根据您的情况，您希望在右下角和左下角放置边距。

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

如何使Jumbotrons不垂直接触？

1 个答案: