在 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。

我还尝试在行/网格 div 内移动 <h3>，但这会导致事情变得不对齐......

<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