Question

我有一个两列的形式，我希望第二列中的一个字段堆叠在移动视图的第一列中的字段下。目前这是移动视图中发生的事情：

名字
电邮地址
帐号
姓氏
联系电话

但这是我希望它在移动视图中执行的操作：

名字
姓氏
电邮地址
帐号
联系电话号码

基本上我希望姓氏位于移动视图的名字字段下。我该如何实现这一目标？我无法向您显示实际页面。希望代码能够提供帮助。我希望它与此页面上的联系表单一样：http://fixate.it/contact/电子邮件地址字段如何位于移动视图中的名称字段下方（小视图）

谢谢你:)

<div class="row">
        <!-- Shows -->
        <div class="large-6 small-12 columns"> 
          <div class="row">
              <div class="large-12 column">
                 <form>

                      <label>First Name </label>
                        <input type="text"/>

                      <label>E-mail Address</label>
                        <input type="text"/>


                      <label>Account Number</label>
                        <input type="text"/>


            </div>
           </div>
            </div>  

            <div class="large-6 small-12 columns"> 
          <div class="row">
            <div class="large-12 column">

                  <div class="row">
                    <div class="large-12 columns">
                      <label>Last Name</label>
                        <input type="text"/>

                    </div>
                  </div>
                  <div class="row">
                    <div class="large-12 columns">
                      <label>Contact Phone #</label>
                        <div style="float:left; padding-right:11px;"><select name="phonenumcountry" id="phonenumcountry" style="width:230px;" class="chosen" autocomplete="off">
                        countries
                        </select></div>
                        <div style="float:left;"><input name="phonenum" id="phonenum" class="validate[required,funcCall[validateContactPhoneNumber]]" type="text" value=" " size="20" maxlength="16" onBlur="checkFullText4Numbers(this,event);setAsAccountNo();" onKeyPress="return numbersonly(this,event)" style="vertical-align: top;" placeholder="Area Code + Phone #"></div>


                    </div>
                  </div>

            </div>

           </div>

            </div>


    </div>

Answer 1

您需要使用html堆叠顺序来反映向移动设备的堆叠顺序。

要定位您可以使用的元素，push-6，.pull-6，或者您也可以使用.right，.left类来定位元素。

这里是指向显示两种方法http://cdpn.io/CKBAj

的笔的链接

据我所知，如果您使用自定义标签，最好使用推拉基础列mixin。 @include grid-column($columns:6, $pull:6); - 左对齐，@include grid-column($columns:6, $push:6); - 右对齐，也可以使用$ float：right来定义浮点方向。或者您可以将类添加到html中以定义左右浮动。我个人不喜欢使用push，pull来对齐元素，除非是由页面的布局和外观定义的原因。您应该查看基础文档，了解使用基金会http://foundation.zurb.com/docs/

的大量有用信息

关于您的代码的几点说明;你不需要.small-12，默认情况下基础是.small-12你可能最好定义中等而不是大，因为在我的经验中，基础网格中的元素往往非常灵活。 / p>

希望这会有所帮助。

如何以2列形式堆叠单个字段 - 基础4

1 个答案: