使用 Materialize CSS 的行间距

Question

使用 MaterializeCSS，如何 adjust/remove 行之间的垂直间距？

示例代码：

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

这很混乱，但确实有效。从概念上讲，我认为 "row" 就像 table 行，强制其中的所有内容都在一行中，而不管大小如何，但这确实有效，因为每个 col 都有 s12（全宽）大小。希望这个回答对其他人有帮助。

Answer 2

我这样做是为了快速 space 并在需要时保持空白。

<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;
}

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

Answer 4

我修复了为大屏幕上的 .col 提供 固定高度 的问题。如果您的 .col 高度可以修复（可能使用任何其他 class 并修复它们或更大的屏幕或导致此问题的屏幕，我确信中等 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 容量，所以你自己修好了。

使用 Materialize CSS 的行间距

Spacing Between Rows with Materialize CSS

materialize