如何以2列形式堆疊單個字段 - Foundation 4

Question

我有一個雙列表格，我希望第二列中的一個字段堆疊在移動視圖的第一列中的字段下。這是目前什麼是移動視圖發生的事情：

名
電子郵件地址
帳號
姓
聯繫電話

，但是這是我希望它在移動視圖做：

名
姓
電子郵件地址
有分t號
聯繫電話

基本上我想要姓氏在移動視圖的名字字段下。我如何實現這一目標？我無法向你展示實際的頁面..希望代碼會有所幫助。我希望它像的聯繫表格此頁面上的工作：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，​​或者你也可以用.right定位元素，.left類的。

這裏有一個筆的鏈接顯示，如果您使用自定義標籤例如這兩種方法http://cdpn.io/CKBAj

據我所知，您使用推的更好，拉的基礎上欄的mixin @include grid-column($columns:6, $pull:6); - 左對齊，@include grid-column($columns:6, $push:6); - 右對齊，您也可以使用$ float：right來定義浮動方向。或者您可以將這些類添加到您的html中以定義左側和右側的浮動。我個人並不喜歡使用推式，拉對齊元素，除非有佈局和頁面外觀定義的原因。 你應該看看基礎文檔的使用基礎有很多有用的信息http://foundation.zurb.com/docs/

關於你的代碼幾個筆記;你不需要.small-12，默認情況下基礎是.small-12，你可能會更好地定義中等而不是大型，因爲在我的經驗中，基礎網格中的表單元素往往非常靈活。

希望這有助於。