Material 设计灯。网格系统意外行为

Question

先来一张图：

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

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

P.S。我来自 bootstrap，我没有遇到这个问题。

Answer 1

是的，您可以通过覆盖 mdl 样式来防止此问题，只需添加自定义 class "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

Answer 2

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

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

我的建议是避免在 Bootstrap 中思考并覆盖默认 MDL class，尝试接受框架设计决策。否则，您最好使用自定义 Bootstrap MDL theme.

Material 设计灯。网格系统意外行为

Material design light. Grid system unexpected behavior

css

grid-system

twitter-bootstrap

material-design-lite