MDL“高级”网格结构

Question

我正在尝试实现类似于mdl dashboard example 在桌面视图中左侧有一张卡片，右侧有两张卡片（如 imgur 相册中的第一张图片）的效果， 当它变为平板布局时，它就变成了 imgur 相册中的第二张图片：

http://imgur.com/a/dT4Eo

之所以在示例中起作用，是因为 img-C 在平板布局中只有 3 的宽度，因为有一个隐藏的 1-col 分隔符来弥补 mdl-grid--no-spacing 造成的空间缺失。

我的问题是，如果我希望 img-B 和 img-C 在平板电脑布局中都具有 4-col 宽度，如何实现这种布局结构？

Answer 1

您在设计主题时绝对应该避免使用!important，但如果您覆盖mdl class 布局，我认为使用它没有任何问题。见：https://css-tricks.com/when-using-important-is-the-right-choice/

让 MDL 示例布局简化为：

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-cell--12-col-desktop" />
  <div class="mdl-cell mdl-grid mdl-grid--no-spacing">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" />
    <div class="mdl-cell demo-separator mdl-cell--1-col" />
    <div class="mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop" />
  </div>
</div>

要获得您想要的外观，请在平板电脑视图中隐藏.demo-separator，并将第 3 个卡片类设置为 4-column-tablet 而不是 3：

<div class="mdl-cell demo-separator mdl-cell--1-col mdl-cell--hide-tablet" />
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop" />

然后您需要重新调整第 2 行中列的大小。我会在.mdl-grid--no-spacing 上添加一个覆盖类（我们称之为.grid-central--spacing）：

<div class="mdl-cell mdl-grid mdl-grid--no-spacing grid-central--spacing">

在我的style.css 中，我可以将样式覆盖为：

@media (max-width: 839px) and (min-width: 480px) {
  .grid-central--spacing .mdl-cell--4-col-tablet {
     width: calc(50% - 8px) !important;
  }
  .grid-central--spacing .mdl-cell--4-col-tablet:first-child {
    margin-right: 8px;
  }
  .grid-central--spacing .mdl-cell--4-col-tablet:last-child {
    margin-left: 8px;
  }
}

现在平板视图中的两张卡片之间应该有一个16px 间距。