如何在MaterializeCSS中把cols放在一行的中心？

Question

我想用MaterializeCSS创建一个网格，应该把每一个 col 正中 row但现在 cols 皆从左起 row.

我加了一个 display:flex 变成 row但它实际上破坏了响应性，这意味着如果我挤压浏览器的宽度，我观察到没有响应性的问题。row & col.

代码如下，请大家帮忙。

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

    <div class="container">
      <div class="row" style="border:1px solid black;display:flex">
        <div class="col s12 m3">
          abc
        </div>
        <div class="col s12 m3">
          abc
        </div>
        <div class="col s12 m3">
          abc
        </div>
      </div>
    </div>

Answer 1

如果我没有理解错的话，你需要在第一个col上使用一个偏移，但你的数学有点不对。

Materialize使用的是12列网格和基于%的布局，而不是flex。在一列(s3, m3, l3)上设置size-3表示 "占用25%"，因为123是4，或25%。

所以在你的方案中，你的内容占了容器的75%--如果要使用网格将其居中，你需要在两边各占12.5%。这是不可能的。

三个解决方案。

1. 强制你的3列平等地占据所有可用空间。

<div class="col s12 m4"></div>

<div class="col s12 m4"></div>

<div class="col s12 m4"></div>

2. 使用偏移

这意味着将你的内容栏从3栏（25%）缩减到2栏（16.7%）。这是为了让我们可以有均匀的两边空间--3列的偏移，然后空出另一边的空间。

<div class="col s12 m2 offset-m3"></div>

<div class="col s12 m2"></div>

<div class="col s12 m2"></div>

4. 使用flex和媒体查询。

Materialize网格使用%和margin:auto作为间距。当我们碰到m断点（> 600px）时，我们需要覆盖这个。

.flex-row {
  @media (min-width:600px) {
    display: flex;
    justify-content: center;
    align-items: center;

    > .col.m3 {
      margin-left:0;
    }
  }
}

代码笔 此处.

https:/materializecss.comgrid.html#offsets。