materialize - 使用 Materialise CSS 的行间距

Question

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

示例代码：

<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

使用这些方法：

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

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

Answer 3

如果需要，我这样做是为了让空间清晰且边缘清晰。

<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 4

我修复了在大屏幕上为 s提供固定高度的问题。.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;
}

对于您的解决方案，您只需将所有.cols 放在一行中，就像.row强制下一行一样。很明显，一排需要填满它的.row容量，所以你自己修好了。