Bootstrap 3/Rails 网站上的一个页面不是移动响应的(其他的工作)
One page on Bootstrap 3/Rails site isn't mobile responsive (the others work)
多亏了我之前的 Whosebug 问题的答案,我才能够在 Rails 4 应用程序的 Ruby 上使 bootstrap 3 布局大部分移动响应。
但是,我的 views/devise/sessions/new.html.erb
页面(又名登录页面)没有响应。相反,它在我的 iPhone 5s 上看起来像这样:
这是我的 new.html.erb
文件:
<div class="row">
<div class="col-xs-6">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>
<fieldset>
<legend>Log in</legend>
<%= f.input :email, label: 'Email' %>
<%= f.input :password, label: 'Password' %>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.input :remember_me, as: :boolean %>
</div>
</fieldset>
<% end -%>
<div class="actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6">
<center><h2>Signing in is easy and secure</h2>
<img src="http://static1.squarespace.com/static/54adc070e4b0c8f53bde4cf9/t/54ecfc98e4b0cc380c7af39a/1429903823657/?format=300w" /></center>
</div>
</div>
我后来添加了 viewport
试图修复它,但它仍然没有帮助。
图片会不会太大了?如果必须的话,我可以删除它,但是电子邮件和密码字段下方的灰色框会不会仍然像那样看起来太瘦了?
如果您想自己尝试,这里是测试部署:
https://wheels-registration-yamilethmedina.c9.io/
这是我的评论建议,对你有帮助!!!
Just change the col-xs-6
to other class like container
or container-fluid
.This is because the col
class divides gets the width as per the screen size . And we are forcing to make it col-xs-6
so this change happens to the screen.
多亏了我之前的 Whosebug 问题的答案,我才能够在 Rails 4 应用程序的 Ruby 上使 bootstrap 3 布局大部分移动响应。
但是,我的 views/devise/sessions/new.html.erb
页面(又名登录页面)没有响应。相反,它在我的 iPhone 5s 上看起来像这样:
这是我的 new.html.erb
文件:
<div class="row">
<div class="col-xs-6">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>
<fieldset>
<legend>Log in</legend>
<%= f.input :email, label: 'Email' %>
<%= f.input :password, label: 'Password' %>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.input :remember_me, as: :boolean %>
</div>
</fieldset>
<% end -%>
<div class="actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6">
<center><h2>Signing in is easy and secure</h2>
<img src="http://static1.squarespace.com/static/54adc070e4b0c8f53bde4cf9/t/54ecfc98e4b0cc380c7af39a/1429903823657/?format=300w" /></center>
</div>
</div>
我后来添加了 viewport
试图修复它,但它仍然没有帮助。
图片会不会太大了?如果必须的话,我可以删除它,但是电子邮件和密码字段下方的灰色框会不会仍然像那样看起来太瘦了?
如果您想自己尝试,这里是测试部署: https://wheels-registration-yamilethmedina.c9.io/
这是我的评论建议,对你有帮助!!!
Just change the
col-xs-6
to other class likecontainer
orcontainer-fluid
.This is because thecol
class divides gets the width as per the screen size . And we are forcing to make itcol-xs-6
so this change happens to the screen.