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

Question

這是我登錄表單代碼的一部分：

    <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應用程序混淆。 表格不起作用。 我怎樣才能解決這個問題？

Answer 1

為什么要為電子郵件添加多個輸入字段？ 如果您想要的是不同的造型，那么您的方向就是錯誤的。 如果您想以不同方式設置移動版本的樣式，可以使用媒體查詢： http ： //foundation.zurb.com/docs/media-queries.html 。 現在，您可以為小屏幕添加額外的CSS。