使用 Materialise CSS 的行间距答案

【问题标题】：Spacing Between Rows with Materialize CSS使用 Materialise CSS 的行间距
【发布时间】：2015-05-10 20:59:05
【问题描述】：

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

【问题讨论】：

标签： materialize

【解决方案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（全宽）大小。希望这个答案对其他人有所帮助。

【讨论】：

感谢您自己发布解决方案。顺便说一句，不要为 text-align: center 添加内联 CSS，而是使用 CSS 帮助器类“center-align”。
感谢顶部使用“中心对齐”类。是的，由于多年来使用 html 表格标签，整个“行”的想法让我感到困惑，但它最终对我来说是有意义的。 Materialise 会根据浏览器窗口大小计算出将哪些列放在一起或放在单独的行上。它使制作移动和桌面友好的单个页面变得更加容易。 “行”实际上只是一个部分，可以包含任意数量的列。
仅供参考，我发现 materializecss 有办法让<div class="row"> 标签之间的空间消失。做一个<div class="row" style="margin-bottom: 0px;">
无法将列放在单行中，因为我有偶数/奇数行样式。将 margin-bottom 设置为 0px 的其他解决方案不起作用。

【解决方案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
}

【讨论】：

【解决方案3】：

使用这些方法：

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

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

【讨论】：

我可以建议你添加margin: 0 !important; 吗？否则每列的内容将“浮动”在它之外。

【解决方案4】：

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

当有多个 .col 而不是 12 个网格行可以附加到它时，这是一个对我有用的 sn-p：

.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 的容量，所以你自己修好了。

【讨论】：