css - 材料设计灯。网格系统意外行为

Question

先上一张图：

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

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

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

Answer 1

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

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

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

Answer 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 网格