Rails form_tag 行字段太大

Question

使用 Rails 4 和 Bootstrap 3。

我有一个基本的登录表单。但是，我无法让它在任何设备上很好地格式化。在较小的设备上，它是不可用的。诊断出来，我相信行的右边距很大。但是，我无法确定导致该问题的原因。

我知道整个表单变得不必要地复杂。大多数复杂性只是我努力使其可用。我想，一旦这个问题解决了，我会简化它。

我正在研究我的 HTML，尤其是 CSS 知识。我使用萤火虫。任何关于我将来如何解决这个问题的建议都将不胜感激。实际上，所有帮助都表示赞赏。

当它处于可用尺寸时的形式是：

这是显示应该包含行的 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(&quot;...&quot;); 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(&quot;...&quot;); 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(&quot;...&quot;); 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(&quot;...&quot;); 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>

Answer 1

您没有使用正确的 Bootstrap 3 表单和字段类。

这是bootstrap horizontal forms 的代码示例，这似乎是您为表单建模所依据的内容。

Answer 2

我只是有一个我无法找到的有效边距覆盖。我需要继续使用这些调试器。感谢您的帮助。