html - Materialise grid 做5列

Question

我有 div s12，如何在 Materialise 5 列中执行操作？

我的代码:

<div class="col s12">
  <div class="col s12 l2"></div>
  <div class="col s12 l2"></div>
  <div class="col s12 l4"></div>
  <div class="col s12 l2"></div>
  <div class="col s12 l2"></div>
</div>

请帮忙做5个相同的专栏。 12/5 不完全共享。

Answer 1

实现 5 列响应式布局

以下与 Materialise 0.98.1 及更高版本兼容，因为它使用新引入的 xl媒体断点。

将以下 CSS 添加到您的全局样式表中，以上 CSS 与其他 Materialise 兼容 .col类太。例如，如果您希望在 medium 和上面有 5 个相等的列，在 small 和下面有半宽列，请使用以下内容:

.s5ths,
.m5ths,
.l5ths,
.xl5ths {
  margin-left: auto;
  left: auto;
  right: auto;
}

.row .col.s5ths {
  width: 20%;
}

@media only screen and (min-width: 601px) {
  .row .col.m5ths {
    width: 20%;
  }
}

@media only screen and (min-width: 993px) {
  .row .col.l5ths {
    width: 20%;
  }
}

@media only screen and (min-width: 1201px) {
  .row .col.xl5ths {
    width: 20%;
  }
}

    <div class="row">
      <div class="col m5ths s6">Column 1</div>
      <div class="col m5ths s6">Column 2</div>
      <div class="col m5ths s6">Column 3</div>
      <div class="col m5ths s6">Column 4</div>
      <div class="col m5ths s6">Column 5</div>
    </div>

Here is a working example of the above 。调整窗口大小以查看实际效果。

---

如果您在元素中使用 SASS，我强烈建议您使用 SASS media queries Materialise 提供。