Javascript 在网格中第二行div的顶部添加空间

我使用的是Bootstrap，有一堆格子状的盒子（想想商店的商品搜索结果页面）。我想在所有物品箱的顶部留有空间，除了第一排的那些。使用CSS很难，因为它们根据视口大小进行不同的堆栈

我试着给所有的表都加上一个页边空白，但是我在第一行也有空白。如果没有其他选择，我会这样做，但我想知道是否有更好的方法

---

这里有一个可以使用的方法。

为什么不改为使用margin bottom？

为什么不改为margin bottom？

我测试了这个方法，它在手机上也同样有效

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

我测试了这个，它在手机上也能用

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

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

margin: 0 10px 10px 0;
__________^____^___________ //Right margin
_______________^___________ //Bottom margin

而不是：

margin: 0 10px;

希望这有帮助。

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

margin: 0 10px 10px 0;
__________^____^___________ //Right margin
_______________^___________ //Bottom margin

而不是：

margin: 0 10px;

---

希望这有帮助。

一个较少使用的选项是设置第n项的样式，它可以采用公式或关键字，如奇数或偶数。因此，要跳过前两项，并用一点CSS装饰其余的内容，您可以：

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

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

---

一个较少使用的选项是设置第n项的样式，它可以采用公式或关键字，例如奇数或偶数。因此，要跳过前两项，并用一点CSS装饰其余的内容，您可以：

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

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

---

我能想出的最好的解决方案是“智能”，并且不会干扰引导的其余部分。创建一个名为

.row grid

的新类，并将

边距底部

值应用于相关列，如下所示：

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

---

您可能需要进一步扩展它，以考虑

.row

应用的额外边距或填充，但它应该实现您想要的外观，而不需要依赖每列中的额外包装类。

我能想到的最佳解决方案是“智能”，并且不会干扰引导的其余部分。创建一个名为

.row grid

的新类，并将

边距底部

值应用于相关列，如下所示：

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

您可能需要进一步扩展它，以考虑

行应用的附加页边距或填充，但它应该实现您想要的外观，而不需要依赖每列中的附加包装类。
将容器按页边距的大小：

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


正文{
保证金：0；
背景：黄色；
}
.container>div{
边缘顶部：10px；
显示：内联块；
宽度：200px；
高度：100px；
背景：#cfc；
边框：1px纯黑；
}
.集装箱{
转换：translateY（-10px）；
}

按边距的大小向上移动容器：

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


正文{
保证金：0；
背景：黄色；
}
.container>div{
边缘顶部：10px；
显示：内联块；
宽度：200px；
高度：100px；
背景：#cfc；
边框：1px纯黑；
}
.集装箱{
转换：translateY（-10px）；
}

我可以，但这对我来说似乎有点不妥。我的目标是“正确”的方式，如果有的话；）“正确”的方法是使用
行
将它们分开，但这会消除一些响应功能<代码>页边距底部：

可能是找到您的解决方案的最方便的途径。@RobertC我会这样做，但这是一个动态页面，我无法知道将显示多少项，因此我必须做一大行。我可以，但这对我来说似乎有点不太妥当。我的目标是“正确”的方式，如果有的话；）“正确”的方法是使用

行

将它们分开，但这会消除一些响应功能<代码>页边距底部：可能是找到您的解决方案的最方便的途径。@RobertC我会这样做，但这是一个动态页面，我无法知道将显示多少项，因此我必须做一大行。编辑以添加：我尝试了页边距。我知道我可以这样做，但我希望看看是否有一种更干净的方法，在不需要的行中没有不必要的空间。这些框总是3行吗？@KevBot这是一个大的行，每个行中有动态数量的框。但是，在手机上，每行始终有一个方框，在小屏幕上每行有2个方框，在中屏幕上每行有3个方框，在大屏幕上每行有4个方框。我知道我可以这样做，但我希望看看是否有一种更干净的方法，在不需要的行中没有不必要的空间。这些框总是3行吗？@KevBot这是一个大的行，每个行中有动态数量的框。但是，移动设备上每行始终有一个框，小的每行2个框，中的每行3个框，大的每行4个框。我不能在右边添加边距，因为我的网格在右边没有足够的空间；）那么，你打算如何在不使用边距的情况下添加外部空间呢？我在一个div中使用了一个div。外部div带有填充，因此内部div更小，每个div之外的空间都没有边距。我在你的OP中看不到这一点，因为这不重要。我要求在所有行的顶部减去第一行后留有空间。我不能在右边加边距，因为这样我的网格就没有理由在右边留有空间；）那么，你打算如何在不使用边距的情况下添加外部空间呢？我在一个div中使用了一个div。外部div带有填充，因此内部div更小，每个div之外的空间都没有边距。我在你的OP中看不到这一点，因为这不重要。我要的是所有行顶部的空间减去第一行。是的，这似乎就是我想要的。n+3是什么意思？第三个一号之后？我想我可以为每个视口单独做一个。是的。所以你冷做3n+0，这将是每三个项目。这里我们从第三个开始，n+3。我主要使用它在我的表tr标签上与第n个孩子（奇数）交替使用行颜色。谢谢你的帮助，这对我来说太棒了！是的，这似乎是什么