物化网格做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添加到全局样式表:

.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也与其他Materialize .col类兼容.例如,如果要在中等和更高的列上使用5个相等的列,在小的和下面使用半宽列,请使用以下内容:

<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,我强烈建议您使用Materialize提供的SASS媒体查询.