材料设计灯。网格系统意外行为答案

【问题标题】：Material design light. Grid system unexpected behavior材料设计灯。网格系统意外行为
【发布时间】：2016-08-20 15:48:59
【问题描述】：

首先是一张图片：

这是来自getmdl.io 的屏幕。我无法理解这种行为。我很伤心，我希望恰好一行中的 3 列，每列的宽度等于行宽的 1/3。但在某些屏幕分辨率中，列宽等于行宽的一半。这来自基于媒体查询的 css 指令，似乎是设计使然。

所以我的问题是，我可以防止这种行为吗？如果不是，那么这种行为的原因是什么。

附：我来自引导程序，我没有这个问题。

【问题讨论】：

标签： css twitter-bootstrap material-design-lite grid-system

【解决方案1】：

没有办法实现您所描述的开箱即用方式，如果您坚持在移动设备中使用 3 列，则必须按照@JyotiPathania 的建议覆盖该类。

记住Material Design Lite网格系统与Bootstrap完全不同。 Bootstrap 具有固定的 12 列，并针对所有视口按比例缩小。相比之下，Material Design Lite 有 12 个用于台式机，8 个用于平板电脑，4 个用于移动设备。因此，.mdl-cell--4-col 将占据桌面设备屏幕的 1/3、平板电脑的 1/2 和移动设备的整个屏幕。

我的建议是避免考虑 Bootstrap 和覆盖默认的 MDL 类，尝试接受框架设计决策。否则，最好使用自定义 Bootstrap MDL theme。

【讨论】：

【解决方案2】：

是的，您可以通过覆盖 mdl 样式来防止此问题，只需添加一个自定义类“custom-width”：

HTML：

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
</div>

CSS：

.custom-width {
    width: calc(33.3333% - 16px) !important;
}

回答你的第二个问题是因为 mdl 的行为根据当前视口大小：

桌面：

.mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
    width: calc(33.3333% - 16px);
}

平板电脑：

.mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
    width: calc(50% - 16px);
}

手机：

.mdl-cell--4-col, .mdl-cell--4-col-mobile.mdl-cell--4-col-mobile {
    width: calc(100% - 16px);
}

希望这对您有所帮助。更多信息请阅读文档mdl grid

【讨论】：

对我来说很清楚。但它使 {4} 无用，因为实际上 {4} 转向 {6} 或其他东西，我无法在没有 hack 的情况下阻止它。是的，!important 是一个肮脏的黑客，这是获得我想要的功能的糟糕方式。