Стилизация входных меток в Foundation 5

Question

Я использую класс префикса Foundation 5 для стилизации надписей для элементов ввода 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>

Вот 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>