不规则盒子的 Materialise Grid 不起作用

Question

我正在尝试使用 materialize 制作前端，并且我已经将 Django 用于后端。我现在的样子是这样的：

我希望它更像这样：

我正在使用 Django 和 Materialise。而here就是我写的代码

Answer 1

这个布局很容易用 CSS grid 实现，但如果你想用 Materialise 网格近似它，你只需要修复你的列并使用一点 flex。

您要复制的示例有两个主要列：

<div class="row">
    <!-- Two columns, wider on the left -->
    <div class="col s12 l8">Left</div>
    <div class="col s12 l4">Right</div>
</div>

左边的列有嵌套的行和列，如下所示：

<div class="row">
      <!-- Three columns -->
      <div class="col s4"></div>
      <div class="col s4"></div>
      <div class="col s4"></div>
</div>

<div class="row">
      <!-- One column -->
      <div class="col s12"></div>
</div>

<div class="row">
      <!-- Three columns -->
      <div class="col s4"></div>
      <div class="col s4"></div>
      <div class="col s4"></div>
</div>

我们需要在其中两行上使用 flex - 这会强制内容拉伸以适合。小心 flex，它会破坏小屏幕尺寸的网格系统。

我们还需要一些 css 来强制按钮填充容器，并移除最后一行的底部边距。我创建了一个名为 .content 的包装器，我们将使用它来应用填充（为了保持一致性，与行的边距相同）。

Codepen.

不规则盒子的 Materialise Grid 不起作用

Materialize Grid for irregular boxes not workings

html

css

materialize