使用Materialise CSS在行之间进行间距

Question

使用MaterialiseCSS，如何调整/删除行之间的垂直间距？

示例代码：

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
</div>
<div class="row">
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>

Answer 1

我明白了。将每个col放在一个row中将消除垂直间距。

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>

令人困惑，但它确实有效。从概念上讲，我认为“行”就像一个表行，强制其中的所有内容都在一行而不管大小，但这确实有效，因为每个col都有s12（全宽） ）大小。希望这个答案有助于其他人。

Answer 2

如果需要的话，我这样做是为了制作具有清晰和边距的快速空间。

<div class="clear-10"></div>

.clear, .clear-10, .clear-15 {
  clear: both;
  height: 0; overflow: hidden; /* Précaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px
}
.clear-15 {
  margin-bottom: 15px
}

Answer 3

使用这些方法：

.row .col{
    padding: 0 !important;
}

然后，不必要的空间问题就会消失。 接下来，您可以为div添加任何其他样式

Answer 4

我修复了在较大屏幕上为.col提供固定高度的问题。如果您的.col高度可以修复（可能使用任何其他类并修复它们或更大的屏幕或导致此问题的屏幕，我相信中等col受影响最大。）。

当有多个.col而不是12个网格行可以附加到它时，这是一个适用于我的代码段：

.container {
  padding: 2.4em;
}

.container .row .col.m4 {
  margin-top: 3em;
  height: 42em; //put your required height which fix this by testing.
  width: 33%;
}  


@media screen and (min-width:10px) and (max-width: 640px){
  .container {
    padding: .5em;
  }
  .container .row .col.s12 {
    width: 100%;
    /*height: 45em;*/ We don't need that to be fixed in small devices
  }
}

.container .row {
  margin-top: 1.2em;
}

对于您的解决方案，只需要将所有.col放在一行中，因为.row强制下一行。显而易见的是，一行需要填充它的.row容量，所以很好地修复了你自己。