Foundation 5 中的输入标签样式答案

【问题标题】：Styling input labels in Foundation 5Foundation 5 中的输入标签样式
【发布时间】：2016-08-06 07:45:28
【问题描述】：

我正在使用 Foundation 5's "prefix" class 为 HTML 输入元素设置标签样式。我遇到的问题是，当标签内的文本变得太长时（由于文本的长度或调整浏览器窗口的大小），标签开始消失，并允许输入元素接管其余部分空间。这是我正在使用的代码：

<div class="row">
    <div class="large-6 columns">
        <div class="row collapse prefix-radius">
            <div class="small-3 columns">
                <span class="prefix">A Test Label</span>
            </div>
            <div class="small-9 columns">
                <input type="text" placeholder="Value">
            </div>
        </div>
   </div>
</div>

Here is a jsfiddle.

我想要的行为是标签上的所有文本始终可见，并且如果需要，输入元素会变小（或隐藏）。

Bootstrap 实际上完全按照我的意愿处理这种情况(jsfiddle)，但我需要使用 Foundation 来模拟这种行为。

【问题讨论】：

因为在 bootstrap 中，包装器元素 .input-group 有一个 display:table，这意味着它的子元素 - td 保证其内容可见，标签元素有 white-space:nowrap - 内容保持打开一条线。我还没有设法在 Foundation 中找到相同的功能。似乎需要手动调整 css - jsfiddle.net/a63kayuc/1

标签： css zurb-foundation-5

【解决方案1】：

您可以调整列类来为不同的屏幕尺寸指定不同的宽度。

<div class="row">
    <div class="large-6 columns">
        <div class="row collapse prefix-radius">
            <div class="small-5 medium-4 large-3 columns">
                <span class="prefix">A Test Label</span>
            </div>
            <div class="small-7 medium 8 large-9 columns">
                <input type="text" placeholder="Value">
            </div>
        </div>
    </div>
</div>

【讨论】：