物化网格do 5列

Question

我有div s12，我怎样才能在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列响应布局

下面的内容与物化0.98.1及以上版本兼容，因为它使用了新引入的xl媒体断点。

将下面的CSS添加到全局样式表中，上面的CSS也与其他物化.col类兼容。例如，如果您希望在中等及以上区域设置5个相等的列，在小的和更低的位置使用半宽度的列，请使用以下方法：

​

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

​

下面是上面的一个工作示例。调整窗口的大小以查看它的运行情况。

如果您在项目中使用SASS，我强烈建议您使用物化提供的SASS媒体查询。

Answer 2

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

代码段

​

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

​