如何使用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 Foundation根据屏幕大小显示和隐藏电子邮件表单。当屏幕较小时，会显示一个不同的输入字段，其中包含一个附加类“smallmail”（因此我可以为移动版本设置不同的样式）和一个占位符，因为在移动版本中我隐藏了标签。完整版网站不需要占位符。

这可行，但有一个问题。该表单有两个带有电子邮件的输入字段，Rails 应用程序会感到困惑。表格不起作用。我该如何解决这个问题？

Answer 1

为什么您需要多个电子邮件输入字段？如果你想要的只是不同的样式，那你就走错了方向。如果您想为您的移动版本设置不同的样式，您可以使用媒体查询：http://foundation.zurb.com/docs/media-queries.html。现在您可以为小屏幕添加额外的 CSS。