在 MDL 中向 grid/row 添加标题的最佳方法是什么

Question

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

<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> 的左侧添加一些 padding/margin 但这对我来说感觉有点 hacky 并且不觉得我正在使用如果我这样做的话，MDL 是正确的。

我也尝试将 <h3> 移动到 row/grid 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

在 MDL 中向 grid/row 添加标题的最佳方法是什么

What's the best way to add a title to a grid/row in MDL

html

css

material-design-lite