在MDL中添加标题的最佳方法是什么？

Question

我想知道在 material design lite 中给一行添加标题的推荐方法是什么。下面我有一行（即：一个网格），里面有两列。假设我想给它添加一个titleheading。当你运行下面的代码时，你会发现标题紧贴着文档的左边（而且与内容的缩进程度不一样）。

<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来为左边的标题添加一些paddingmargin。<h3> 但我觉得这样做有点黑客化，如果要这样做的话，感觉我没有正确使用MDL。

我还试着把 <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