Zurb基金会 - 在较小的屏幕上移除网格填充物?
问题描述:
我试图去除填充左,右小屏幕上下方的网格项目:Zurb基金会 - 在较小的屏幕上移除网格填充物?
<!-- row block -->
<div class="row row-cards">
<!-- grid container -->
<div class="grid-container">
<!-- grid x -->
<div class="grid-x grid-padding-x">
<!-- item -->
<div class="cell medium-6">
xxx
</div>
<!-- item -->
<!-- item -->
<div class="cell medium-6">
xxx
</div>
<!-- item -->
</div>
</div>
</div>
<!-- row block -->
CSS:
/* Small only */
@media screen and (max-width: 39.9375em) {
.row-cards {
.grid-container {
padding: 0;
}
.grid-padding-x {
padding: 0;
.cell {
padding: 0 !important;
}
}
}
}
但覆盖不工作。这就是我得到:
这是我想获得:
任何想法?
答
您是否尝试过在网格上-X包装类.small-margin-collapse
,像这样:
<div class="grid-x grid-padding-x small-margin-collapse">
https://foundation.zurb.com/sites/docs/xy-grid.html#collapse-cells
答
我劈(LESS):
/* Small only */
@media screen and (max-width: 39.9375em) {
.row {
background-color: #ffffff;
.grid-container {
padding-right: 10px; // a temporary hack
padding-left: 10px; // a temporary hack
max-width: 100%;
margin: 0 auto;
}
.grid-padding-x {
.cell {
padding-right: 0;
padding-left: 0;
}
}
}
}
只是尝试。但没有运气。 – laukok
是'.row'基础的本地课程,除了'.row-card'之外,它也被应用吗?如果是这样,当“.row”没有用于“.column”类时,左侧和右侧都有负边距。您是否在项目中导入遗留和网格x网格?也许你应该坚持只有一个网格系统。 –