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

您所要做的就是创建一个通用的自定义 class 并根据您的要求从其 s1, s2... 元素的 materialize 继承属性，如：

代码片段

.grid-example {
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  background-color: tomato;
  color: white;
  padding: 0;
}

.custom-col {
    width: 20%;
    margin-left: auto;
    left: auto;
    right: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col custom-col grid-example">1</div>
  <div class="col custom-col grid-example">2</div>
  <div class="col custom-col grid-example">3</div>
  <div class="col custom-col grid-example">4</div>
  <div class="col custom-col grid-example">5</div>
</div>

Answer 2

具体化 5 列响应式布局

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

将以下 CSS 添加到您的全局样式表：

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

以上 CSS 也与其他 Materialise .col 类兼容。例如，如果你想在 medium 和上面有 5 个相等的列，在 small 和下面有半宽列，使用以下：

<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。调整 window 的大小以查看实际效果。

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

Materialise grid 做5列

Materialize grid do 5 columns

html

css

frameworks

materialize

代码片段

具体化 5 列响应式布局