2

我正在使用显示模式，但我发现 - 如记录的那样 - 在小屏幕中显示是屏幕宽度和高度的 100%，而我需要一些空间......知道吗？

谢谢

4

2 回答 2

1

我有同样的问题。Foundation 的揭示使“小”的所有模态都全屏显示。我有时想为某些单独的模态禁用此功能。我查看了设置文件，似乎没有这个选项。仅创建我自己的 css 来覆盖它是不够的，因为reveal 还使用 JavaScript 来设置与视口顶部的距离。

理想情况下，我们可以有一个类或属性，如 data-reveal-small-full="false"。

作为临时解决方案，我创建了样式显示的强制覆盖来创建小的全屏行为。

/* Vertical center mixin
   ========================================================================== */

@mixin vertical-align($position: relative) {
    position: $position;
    top: 50% !important;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* Force override of default reveal fullscreen for small behaviour 
   ========================================================================== */

[data-reveal-small-full="false"] {
    @include breakpoint(small only) {
        @include vertical-align();
        border-radius: $reveal-radius;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(100% - 20px);
        min-height: 0;
        width: $reveal-width;
    }
}
于 2019-05-14T07:26:40.530 回答
0

您尚未提供任何代码或更多详细信息。

您可以在显示中使用以下类或根据您的需要创建自己的类：

tiny
small
large
full

https://foundation.zurb.com/sites/docs/reveal.html#sizing

在小屏幕上，模态框始终是屏幕宽度的 100%。在中型或更大的屏幕上，宽度变为 600 像素（请参阅 $reveal-width 设置）。

于 2018-12-28T15:08:54.307 回答