Question

我是zurb基础的初学者，并试图将zurb基础与asp.net表单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>

仅定位平板电脑和平板电脑：

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

试试这个：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>

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

1 个答案: