使用Rails 4和Bootstrap 3。
我已经得到了什么应该是一个基本的登录表单。但是,我无法在任何设备上进行格式化。在较小的设备上,它无法使用。诊断一下,我相信行的右边距是巨大的。但是,我无法确定导致该问题的原因。
我知道整个表格变得不必要地复杂。大多数复杂性只是我努力使其可用。一旦这个问题得到解决,我会简化它。我想。
我正在研究我的HTML,尤其是CSS知识。我用Firebug。关于如何在将来解决这个问题的任何建议将不胜感激。实际上,所有帮助都表示赞赏。
可用尺寸时的表格是:
这是显示应该包含行的div的表单视图:
这是行的视图。合适的边距是巨大的,我还没有找到一个可以改变它的元素:
这是表格的Rails视图:
<div class="col-md-6">
<h1>Log in</h1>
<%= form_tag sessions_path do %>
<div class="col-md-6">
<div class="field align_right">
<%= label_tag :logon %>
<%= text_field_tag :logon %>
</div>
<div class="break_line"></div>
<div class="field align_right">
<%= label_tag :password %>
<%= password_field_tag :password %>
</div>
<div class="break_line"></div>
<div class="field align_right">
<%= label_tag :remember_me %>
<%= check_box_tag :remember_me, 1, true %>
</div>
<div class="break_line"></div>
<div class="field align_right">
<%= label_tag :change_password %>
<%= check_box_tag :change_password, nil, false %>
</div>
<div class="break_line"></div>
<div class="field align_right never" id="new_password_div">
<%= label_tag :new_password %>
<%= password_field_tag :new_password %>
</div>
<div class="break_line"></div>
<div class="field align_right never" id="password_confirmation_div">
<%= label_tag :confirmation %>
<%= password_field_tag :password_confirmation %>
</div>
<div class="break_line"></div>
<div class="actions"><%= submit_tag "Log in" %></div>
</div>
<% end %>
</div>
这是HTML格式:
<form method="post" action="/sessions" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="...=" name="authenticity_token"></div>
<div class="col-md-6">
<div class="field align_right">
<label for="logon">Logon</label>
<input type="text" name="logon" id="logon" style="background-image: url("..."); background-repeat: no-repeat; background-attachment: scroll; background-position: right center;">
</div>
<div class="break_line"></div>
<div class="field align_right">
<label for="password">Password</label>
<input type="password" name="password" id="password" style="background-image: url("..."); background-repeat: no-repeat; background-attachment: scroll; background-position: right center;">
</div>
<div class="break_line"></div>
<div class="field align_right">
<label for="remember_me">Remember me</label>
<input type="checkbox" value="1" name="remember_me" id="remember_me" checked="checked">
</div>
<div class="break_line"></div>
<div class="field align_right">
<label for="change_password">Change password</label>
<input type="checkbox" name="change_password" id="change_password">
</div>
<div class="break_line"></div>
<div id="new_password_div" class="field align_right never">
<label for="new_password">New password</label>
<input type="password" name="new_password" id="new_password" style="background-image: url("..."); background-repeat: no-repeat; background-attachment: scroll; background-position: right center;">
</div>
<div class="break_line"></div>
<div id="password_confirmation_div" class="field align_right never">
<label for="confirmation">Confirmation</label>
<input type="password" name="password_confirmation" id="password_confirmation" style="background-image: url("..."); background-repeat: no-repeat; background-attachment: scroll; background-position: right center;">
</div>
<div class="break_line"></div>
<div class="actions"><input type="submit" value="Log in" name="commit"></div>
</div>
</form>
答案 0 :(得分:0)
您没有使用正确的Bootstrap 3表单和字段类。
以下是bootstrap horizontal forms的代码示例,它似乎是您之后为表单建模的。
答案 1 :(得分:0)
我只是有一个我无法找到的边距权限覆盖。我需要继续使用那些调试器。谢谢你的帮助。