Question

我正在尝试实现与mdl dashboard example类似的东西，左边有一张卡，桌面视图右边有两张卡（就像imgur相册中的第一张图片一样），当它变为平板电脑布局时，它就像是imgur相册中的第二张图片：

它在这个例子中工作的原因是因为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柱平板电脑而不是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;
  }
}

现在平板电脑视图中的2张卡之间应该有16px间距。

MDL“高级”网格结构

1 个答案: