如何用Bootstrap 4网格系统渲染Django 2.0.4认证表单？

Hey there, the issue you're facing is pretty straightforward—your old form used Bootstrap's grid classes (col-lg-4 offset-lg-4) to constrain and center the input fields, but your new widget_tweaks-based form removed that container structure. That's why the input widths don't match the original layout anymore.

Here's how to adjust your new form code to replicate the old styling while keeping the benefits of widget_tweaks:

Modified Form Code #

<div class="jumbotron">
  {% load widget_tweaks %}
  <form class="form-horizontal" method="post" action="{% url 'login' %}">
    {% csrf_token %}
    
    {% for hidden_field in form.hidden_fields %}
      {{ hidden_field }}
    {% endfor %}
    
    {% if form.non_field_errors %}
      <div class="alert alert-danger" role="alert">
        {% for error in form.non_field_errors %}
          {{ error }}
        {% endfor %}
      </div>
    {% endif %}
    
    {% for field in form.visible_fields %}
      <div class="form-group">
        <!-- Restore the grid container from old form to control width and centering -->
        <div class="col-lg-4 offset-lg-4">
          <!-- Add control-label class to match old form's label styling -->
          {{ field.label_tag|add_class:"control-label" }}
          
          {% if form.is_bound %}
            {% if field.errors %}
              {% render_field field class="form-control is-invalid" %}
              {% for error in field.errors %}
                <div class="invalid-feedback">
                  {{ error }}
                </div>
              {% endfor %}
            {% else %}
              {% render_field field class="form-control is-valid" %}
            {% endif %}
          {% else %}
            {% render_field field class="form-control" %}
          {% endif %}
          
          {% if field.help_text %}
            <small class="form-text text-muted">{{ field.help_text }}</small>
          {% endif %}
        </div>
      </div>
    {% endfor %}
    
    <div class="container" id="btn_login">
      <button type="submit" class="btn btn-primary btn-md" role="button">Log in</button>
      <!-- Re-add the next hidden field to preserve login redirect functionality -->
      <input type="hidden" name="next" value="{{ next }}"/>
    </div>
  </form>
  
  <span class="container" id="forgotten_password">
    <a href="">Forgot your password ?</a>
  </span>
</div>

Key Changes Explained #

• Restored Grid Container: Wrapped each field's label and input in <div class="col-lg-4 offset-lg-4">—this is exactly what your old form used to limit input width to 4 columns and center it on large screens.
• Added control-label Class: Used |add_class:"control-label" on the label tag to match the styling from your old form's labeled inputs.
• Reinstated next Hidden Field: Your new form was missing the redirect field from the original code, so I added it back to ensure users are sent to the correct page after login.
• Bootstrap Validation States: Added is-invalid and is-valid classes to inputs when the form is bound, which integrates seamlessly with Bootstrap's built-in validation styling for error/success feedback.

Quick Responsive Tip #

If you want the layout to adapt to smaller screens, you can add additional grid classes to the container div, like col-md-6 offset-md-3 col-sm-8 offset-sm-2, to adjust the input width and centering for medium and small devices.

内容的提问来源于stack exchange，提问作者Théo Lavaux