如何在 Materialise CSS 中制作 7 列网格？答案

【问题标题】：How to make a 7 column grid in Materialize CSS?如何在 Materialise CSS 中制作 7 列网格？
【发布时间】：2018-08-23 18:58:15
【问题描述】：

我正在使用 Materialize CSS 并希望制作一个包含 7 列的网格。 2、3、4、6 等很容易，但是不能被 12 整除的东西呢？

我尝试按照这个答案为 7 构建一个：How to set five column in row with Materialize Design?

如何调整 7 列？这是我目前所拥有的：

  <div class="row-cover"><div class="row-wrap"><div class="row">
    <div class="col s6 m3 l2 ">1</div>
    <div class="col s6 m3 l2">2</div>
    <div class="col s6 m3 l2">3</div>
    <div class="col s6 m3 l2">4</div>
    <div class="col s6 m3 l2">5</div>
    <div class="col s6 m3 l2">6</div>
    <div class="col s6 m3 l2 ">7</div>
 </div></div></div>

CSS

.row div {
  height: 20px;
  background-color: aquamarine;
}
.row-cover { overflow: hidden; }
.row-wrap { margin: 0 -8.33333%; }

特别适合大屏、中小工作如期而至。但是我希望大屏幕将它们全部放在一行上，而不是像这样，上面的代码看起来如何：

谢谢！！

【问题讨论】：

标签： html css materialize

【解决方案1】：

试试这个 HTML 和 CSS

HTML：

<div class="row-cover">
    <div class="row-wrap">
        <div class="row centered">
            <div class="teal center col s1 offset-s2">1</div>
            <div class="blue center col s1">2</div>
            <div class="red center col s1">3</div>
            <div class="orange center col s1">4</div>
            <div class="yellow center col s1">5</div>
            <div class="green center col s1">6</div>
            <div class="brown center col s1">7</div>
       </div>
    </div>
</div>

CSS：

.row-cover { overflow: hidden; }
.row-wrap { margin: 0 -8.33333%; }
 @media only screen and (max-width: 767px) {
    .row-wrap { margin: 0; }
 }
 .centered{
     margin-left: 5%
 }

您可以根据需要更改 max-width 的值。

Codepen Demo

How to set five column in row with Materialize Design?

【讨论】：