Question

首先是一张图片：

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

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

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

Answer 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。

Answer 2

是的，您可以通过覆盖mdl样式来阻止此问题，只需添加自定义类＆＃34;自定义宽度＆＃34;：

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

材料设计轻。网格系统意外行为

2 个答案: