在 MDL 中向网格/行添加标题的最佳方法是什么

Question

我想知道在material design lite中向一行添加标题的推荐方法是什么。下面我有一行(即网格(，其中有两列。假设我想给它添加一个标题/标题。当你运行下面的代码时，你会看到标题紧贴着文档的左侧(与内容的缩进级别不同(。

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<h3>My Title</h3>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>

我可以很容易地添加一些CSS，在<h3>的左边添加一些填充/边距，但这对我来说有点麻烦，如果我这样做的话，我觉得我没有正确地使用MDL。

我还尝试将<h3>移动到行/网格div中，但这会导致事情变得不对齐。。。

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-grid">
<h3>My Title</h3>
<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>

我能想到的唯一方法是将<h3>封装在它自己的mdl-grid中。这是有效的，但它在标题上方和下方添加了不需要的填充(因为它在网格中(。

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<h3>My Title</h3>
</div>
</div>
<div class="mdl-grid">

<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>

是否可以使用mdl简单地将标题添加到行中？

Answer 1

喜欢那样吗？：

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mdl-layout__title">
<div class="mdl-cell mdl-cell--12-col">
<h3>My Title</h3>
</div>
</div>
<div class="mdl-grid">

<div class="mdl-cell mdl-cell--3-col">
Content 1
</div>
<div class="mdl-cell mdl-cell--3-col">
Content 2
</div>
</div>

我将第一个mdl-grid更改为mdl-layout__title