Question

我正在尝试为不同的媒体类型获取此布局，示例如下。

小屏幕：

+----------------------+
| LABEL                |
+----------------------+
| TEXT INPUT           |
+----------------------+

中屏幕：

+----------------------+----------------------+
| LABEL                | TEXT INPUT           |
+----------------------+----------------------+

所以我有这段代码：

<div class="row">
    <div class="columns medium-2">
        <label>
            Label
        </label>
    </div>
    <div class="columns medium-10">
        <input type="text" />
    </div>                                    
</div>

一切都很好，但对于中等屏幕，标签不是垂直对齐到中间，也不是与右边的水平对齐。要实现此基础5，标签有两个特殊类别：label.inline和label.right，但我不希望将这些类用于小屏幕。

可能的解决方案，我已经知道但寻找更好的（仅限css）：

<label class="visible-for-small-only">
    Label
</label>
<label class="visible-for-medium-up right inline">
    Label
</label>

是否有任何仅限CSS的解决方案，可以重复使用基础类inline和right，还是必须有两个标签，一个仅适用于小屏幕，一个可见其余的屏幕是否可见？

Answer 1

由于您说您正在使用SASS，因此您可以创建一个自定义类，并为中型屏幕和更高版本添加内联标签样式。以下是您将如何做到这一点：

label {
    &.inline-for-medium-up { 
        @media #{$medium} {
            @include form-label(inline,false);
        }
    }
}


<div class="row">
    <div class="medium-2 columns">
        <label class="inline-for-medium-up">
            Label
        </label>
    </div>
    <div class="medium-10 columns">
        <input type="text" />
    </div>                                    
</div>

说明：

使用SASS，您可以创建CSS的混合，然后将它们包含在您想要的任何位置。 Form-label是创建基础的mixin，它包含所有表单标签样式。它有两个可以添加的参数，一个是内联的。因此，如果您包含mixin并添加inline参数，则sass将包含内联标签的所有css。我将mixin与媒体查询中的参数包括在一起，该参数表示如果屏幕大小适中，则仅包括样式。

Foundation 5 class label.inline是否只能用于@media medium-up？

1 个答案: