如何根據使用導軌的屏幕大小隱藏或顯示視圖中的元素？

這裏是我的登入形式的代碼的一部分：如何根據使用導軌的屏幕大小隱藏或顯示視圖中的元素？

<div class="row"> 

     <div class="small-10 medium-8 large-6 small-centered columns"> 

      <div class="row collapse animated slideInLeft"> 

       <div class="hide-for-small-only medium-4 large-4 large-centered columns "> 
        <%= f.label :email, 'Email', class: "prefix signlbl email" %> 
       </div> 

       <div class="hide-for-small-only small-12 medium-8 large-8 columns"> 
        <%= f.text_field :email, class: "input" %> 
       </div> 
       <div class="show-for-small-only small-12 medium-8 large-8 columns"> 
        <%= f.text_field :email, class: "input smallmail", autofocus: true, placeholder: "Email" %> 
       </div> 

      </div> 
     </div>   

    </div>

我已經使用Zurb基礎，以展示並根據屏幕尺寸隱藏電子郵件的形式。當屏幕較小時，會顯示一個不同的輸入字段，其中包含一個額外的類「小郵件」（因此我可以以不同的方式顯示手機版）和佔位符，因爲在手機版中隱藏了標籤。佔位符不需要站點的完整版本。

這可行，但有一個問題。該表單有兩個輸入字段與電子郵件和Rails應用程序混淆。表單不起作用。我怎樣才能解決這個問題？

來源

2014-03-05 THpubs

你爲什麼實際上需要兩個電子郵件字段？在我看來，你應該讓css關心響應能力。風格隨屏幕大小而變化，但形式保持不變。我認爲您需要兩種方式來設置電子郵件輸入的樣式，而不是兩個單獨的電子郵件字段。（編輯：rails4guides說，它更好:)） – Jelle

爲什麼要爲電子郵件輸入多個字段？如果所有你想要的都是不同的造型，你會走錯方向。如果您想以不同方式設置手機版本，則可以使用媒體查詢：http://foundation.zurb.com/docs/media-queries.html。現在你可以爲小屏幕添加額外的CSS。

來源

2014-03-05 11:28:48

是否有可能像這樣添加佔位符？ – THpubs

非常感謝。我使用媒體查詢來將佔位符全屏設置爲白色，以便它們不可見！ – THpubs

如何根據使用導軌的屏幕大小隱藏或顯示視圖中的元素？

回答

相關問題