Question

我正在使用 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来模拟这种行为。

Answer 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>

在Foundation 5中为输入标签设置样式

1 个答案: