Zurb Foundation 6 中是否有任何类可以使网格容器仅针对某个断点全角

Is there any class in Zurb Foundation 6 to make grid container fullwidth for a certain breakpoint only

提问人:TRos 提问时间:10/9/2023 最后编辑:TRos 更新时间:10/9/2023 访问量:18

问:

最近,我完成了基于 Zurb Foundation 6 XY Grid 的网站。根据文档,全宽 .grid-container 有两个类:.fluid(制作带排水沟的全宽容器)和 .full(制作不带排水沟的全宽容器)。

但是,如果我只需要一个全角容器,例如,用于平板电脑布局,该怎么办?是否有任何其他类(如 .hide-for-medium 等)?

目前,我只找到了两种处理方法:

  1. 当视口宽度达到特定值时,使用 JavaScript 添加类 .full。

  2. 使用 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;
            }
        }
网格 zurb-foundation 响应 式断点

评论


答: 暂无答案