MDL和内容列

Question

我理解我们是如何在bootstrap中执行此操作的，但我想知道我们如何在MDL中执行以下操作。

BOOTSTRAP代码：

 <div class="container">
      <div class="row">
        <div class="col-sm-4">
          One of three columns
        </div>
        <div class="col-sm-4">
          One of three columns
        </div>
        <div class="col-sm-4">
          One of three columns
        </div>
      </div>
    </div>

我想知道是否有人可以请出示一个有用的MDL示例。

Answer 1

MDL Official explanation

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col-phone"></div>
  <div class="mdl-cell mdl-cell--3-col-phone"></div>
  <div class="mdl-cell mdl-cell--3-col-phone"></div>
</div>

与bootstrap相似，列宽总共为12。我相信你正在寻找mdl-cell - N-col-phone，（仅在手机模式下将单元格的列大小设置为N）。