在网格中的第二行div上添加空格

Question

我使用Bootstrap并且有一堆网格形状的盒子（想想商店的商品搜索结果页面）。我想在所有项目框的顶部留出空间，除了第一行的那些。使用CSS很难，因为它们根据视口大小而不同地堆叠。

我已经尝试为所有人添加一个保证金顶部但是我的顶行也有空间。如果没有其他选择，我会努力工作，但我想知道是否有更好的方法。

这里有bootply可供使用。

Answer 1

为什么不改为保证金？

Answer 2

较少使用的选项是设置第n个项目的样式，该项目可以采用奇数或偶数等公式或关键字。因此，要跳过前两个项目并使用一些CSS装饰所有其余项目，您可以这样做：

.row div {height:50px; background-color:grey; padding:10px; margin:0 10px;}

.row div:nth-child(n + 3) { margin-top: 10px;}

Answer 3

<强> Working fiddle

您必须在右侧和底部添加边距：

margin: 0 10px;

而不是：

<span>something<span>

希望这有帮助。

Answer 4

我测试过它有效http://www.bootply.com/3gxtw6XOnG这种方式适用于移动设备

.row div {height:50px; background-color:grey; padding:10px; margin:0 10px;margin-bottom:10px}

Answer 5

我能想出的最佳解决方案是“智能”。并且不会干扰Bootstrap的其余部分。创建一个名为.row-grid的新类，并将margin-bottom值应用于相关列，如下所示：

.row.row-grid [class*="col-"] {
    margin-bottom: 15px;
}

您可能需要进一步扩展，以考虑.row应用的额外边距或填充，但它应该实现您想要的外观，而不需要依赖每列中的其他包装类。

Answer 6

transform容器增加了保证金金额：

.container {
  transform: translateY(-10px);
}

＆＃13;

＆＃13;

body {
  margin: 0;
  background: yellow;
}

.container > div {
  margin-top: 10px;
  display: inline-block;
  width: 200px;
  height: 100px;
  background: #cfc;
  border: 1px solid black;
}

.container {
  transform: translateY(-10px);
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;