在同一行中对齐 zurb 基础中的输入控件

Question

我是 zurb Foundation 的初学者，并尝试将 zurb Foundation 与 asp.net forms 4.0 一起用于简单的表单。

我已将我的行固定为“768px”，因为这是一项要求。

我的结构是这样的

<div class="row">
    <div class="large-11 columns">
        <input type="text" placeholder="FIRST NAME:">
    </div>
    <div class="large-1 columns">*</div>
</div>

我正在使用这种结构，所以我验证失败 * 显示在输入框旁边。这在桌面上运行良好。但是当我测试它的屏幕宽度为 768pxels 时，<div class="large-11 columns"> 占用所有空间，验证移至下一行。

他们是我可以防止它的一种方法，以便它将两列都放在同一行中。

我不确定如何在 zurb 中执行此操作。

小提琴示例http://jsfiddle.net/8ww2v/7/

Answer 1

为了针对所有设备，添加一个小、中、大类：

Updated Fiddle

   <div class="row">
                <div class="small-11 medium-11 large-11 columns">
                    <input type="text" placeholder="FIRST NAME:" />
                </div>
                <div class="small-1 medium-1 large-1 columns">*</div>
            </div>
            <div class="row">
                <div class="small-11 medium-11 large-11 columns">
                    <input type="text" placeholder="LAST NAME:" />
                </div>
                <div class="small-1 medium-1 large-1 columns">*</div>
            </div>

            <div class="row">
                <div class="small-11 medium-11 large-11 columns">
                    <input type="text" placeholder="EMAIL:" />
                </div>
                <div class="small-1 medium-1 large-1 columns">*</div>
            </div>

            <div class="row">
                <div class="small-11 medium-11 large-11 columns">
                    <textarea placeholder="ADDRESS"></textarea>
                </div>
                <div class="small-1 medium-1 large-1 columns">*</div>
            </div>

仅针对平板电脑和台式机：

由于 768 像素适用于平板电脑，因此您将添加一个介质类。

试试这个：Fiddle

        <div class="row">
    <div class="medium-11 large-11 columns">
        <input type="text" placeholder="FIRST NAME:"/>
    </div>
    <div class="medium-1 large-1 columns">*</div>
</div>
<div class="row">
    <div class="medium-11 large-11 columns">
        <input type="text" placeholder="LAST NAME:"/>
    </div>
    <div class="medium-1 large-1 columns">*</div>
</div>

<div class="row">
    <div class="medium-11 large-11 columns">
        <input type="text" placeholder="EMAIL:"/>
    </div>
    <div class="medium-1 large-1 columns">*</div>
</div>

  <div class="row">
    <div class="medium-11 large-11 columns">  
        <textarea placeholder="ADDRESS"></textarea>
        </div>
    <div class="medium-1 large-1 columns">*</div>
</div>