2014-02-20 53 views
0

這裏是我的形式:登錄形式不同屏幕

<form> 
    <div class="row"> 
    <div class="small-12 medium-6 small-centered columns"> 
     <div class="row"> 
      <div class="medium-3 columns"> 
       <label for="right-label" class="right inline">Username:</label> 
      </div> 
      <div class="medium-9 columns"> 
       <input type="text" id="right-label" placeholder="Username"> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="medium-3 columns"> 
       <label for="right-label" class="right inline">Password:</label> 
      </div> 
      <div class="medium-9 columns"> 
       <input type="text" id="right-label" placeholder="Password"> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="columns"> 
       <input id="checkbox1" type="checkbox" class="right"><label for="checkbox1" class="right">Remember Me</label> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="columns"> 
       <input type="submit" class="button right" value="Log In"> 
      </div> 
     </div> 

    </div> 
</div> 

我有兩個問題:

  1. 的用戶名和密碼標籤使用坐的輸入左正確的課程,如何在屏幕尺寸較小時關閉此功能?我希望標籤在這個中斷點處居中。

  2. 我希望按鈕的大小與普通大小不同,它應該擴大以填充行。我怎樣才能做到這一點?

回答

0

可見性類允許您根據屏幕大小或設備方向顯示或隱藏元素。您可以使用可見性類來根據瀏覽環境控制用戶看到的元素。

<p class="panel"> 
    <strong class="show-for-small-only">This text is shown only on a small screen.</strong> 
    <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong> 
    <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong> 
    <strong class="show-for-large-up">This text is shown on large screens and up.</strong> 
    <strong class="show-for-large-only">This text is shown only on a large screen.</strong> 
    <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong> 
    <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong> 
    <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong> 
</p> 

http://foundation.zurb.com/docs/components/visibility.html