提问人:TRos 提问时间:10/9/2023 最后编辑:TRos 更新时间:10/9/2023 访问量:18
Zurb Foundation 6 中是否有任何类可以使网格容器仅针对某个断点全角
Is there any class in Zurb Foundation 6 to make grid container fullwidth for a certain breakpoint only
问:
最近,我完成了基于 Zurb Foundation 6 XY Grid 的网站。根据文档,全宽 .grid-container 有两个类:.fluid(制作带排水沟的全宽容器)和 .full(制作不带排水沟的全宽容器)。
但是,如果我只需要一个全角容器,例如,用于平板电脑布局,该怎么办?是否有任何其他类(如 .hide-for-medium 等)?
目前,我只找到了两种处理方法:
当视口宽度达到特定值时,使用 JavaScript 添加类 .full。
使用 CSS 重置某个网格及其内容的边距和填充:
也许有人知道一个内置的类或更优雅的解决方案。
JQuery 解决方案:
if ($('body').width() <= 624) {
$('.menu-grid-container').toggleClass('full');
}
CSS解决方案:
.menu-grid-container {
padding-right: 0;
padding-left: 0;
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
.grid-x, .cell {
padding-right: 0;
padding-left: 0;
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
答: 暂无答案
评论