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

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与媒体查询中的参数包括在一起,该参数表示如果屏幕大小适中,则仅包括样式.