Question

我使用的是显示模式，但正如所记录的那样，我发现在小屏幕上，显示是屏幕宽度和高度的100％，而我需要一些空间...任何想法吗？

谢谢

Answer 1

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

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

tiny small large full

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

在小屏幕上，模态始终是屏幕宽度的100％。在中型或更大尺寸的屏幕上，宽度更改为600px（请参阅$ reveal-width设置）。

Answer 2

我遇到了同样的问题。 Foundation的显示使处于“小”状态的所有模态全屏显示。我有时会针对某些个别模式禁用此功能。我查看了设置文件，但似乎没有选择。仅创建自己的CSS来覆盖它是不够的，因为show还使用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;
    }
}

在小屏幕上显示基金会的大小

2 个答案: