python - Bootstrap 字段看起来很奇怪

Question

我的字段看起来很奇怪，因为它们是巨大的字段输入并占据了整个屏幕。恐怕我的编码没有遵循最佳实践。此外，当我输入错误的用户名和/或密码时，它只会变成绿色并且毫无意义。 目标:改进字段样式并使错误消息更加明显。

Python 文件:

class LogInForm(forms.Form):

    username = forms.CharField(label='Username', max_length=10)
    password = forms.CharField(label='Password', max_length=20, widget=forms.PasswordInput())

HTML 文件:

{% extends 'base.html' %}


{% block content %}
<div class="jumbotron">
<h1><font size="275">Log In</font></h1>
</div>
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

{% if not isUserLoggedIn %}
<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Wanting to Test?!</strong><br>
  Username: king<br>
  Password: test123
  </div>
{% if loggedIn %}

<div class="alert alert-info" role="alert">

Congratulations, you've logged in! Now redirecting you to the homepage...
</div>
<meta http-equiv="refresh" content="3;url=http://localhost:8000/">
{% else %}


{% load bootstrap3 %}
<form class="form-horizontal" name="LoginForm" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <div class="col-md-6 column">
    <button type="submit" class="btn btn-info btn-xlarge"><i class="fa fa-check fa-2x"></i> Login</button></div>

</form>
    <div class="col-md-6 column">
<form action="../../"><button type="submit" class="btn btn-danger btn-xlarge"><i class="fa fa-times fa-2x"></i> Cancel</button></form>
{% endif %}
{% else %}
<div class="alert alert-warning" role="alert">
You're already logged in!
</div>

{% endif %}
{% endblock %}
</form>

当前 可能的修复(但没有我想使用的东西，我必须手动创建错误案例)

1. 手动呈现您的表单字段 (@Selcuk)

<form class="form-horizontal" id="LoginForm" method="post" name=
"LoginForm">
    {% csrf_token %}

    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input class="form-control" name="{{ form.username.html_name}}"
        placeholder="Username" type="text">
    </div>...
</form>

Answer 1

form-control您添加到输入标签中的类会导致框像这样全宽。

All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Via- http://getbootstrap.com/css/#forms