Python 引导字段看起来很奇怪

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

Python文件：

class LogInForm(forms.Form):

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

{% 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>

HTML文件：

class LogInForm(forms.Form):

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

{% 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>

{%extends'base.html%}
{%block content%}
登录
{%if error\u message%}{{{error\u message}{%endif%}
{%if不是isUserLoggedIn%}
&时代；
想测试吗

用户名：king

密码：test123
{%if loggedIn%}
恭喜你，你已经登录了！现在将您重定向到主页。。。
{%else%}
{%loadbootstrap3%}
{%csrf_令牌%}
{%bootstrap_form%}
登录
取消
{%endif%}
{%else%}
你已经登录了！
{%endif%}
{%endblock%}

当前 可能的修复（但我不想使用任何东西，因为我必须手动创建错误案例）

手动呈现表单字段（@Selcuk）

{%csrf_令牌%}
@
...

---

添加到输入标记的

表单控件

类会导致框像这样变宽

所有文本

，

和

元素 .窗体控件设置为

width:100%默认情况下。包装标签和
控制
.form group
中的控件以获得最佳间距

通过-

例如，您可以通过将字段包装在
中来缩小字段。如果你需要精确控制你的HTML，最好坚持我的第二个建议。有了你的第二个建议，我必须为每个错误创建错误案例。例如，如果电子邮件字段没有@then error out，是否正确？这似乎是一项繁重的工作？有没有办法让字段看起来像输入组？不，您只需打印表单引发的错误消息，您不必自己检查错误。看，似乎有很多工作，我不熟悉这一点。介意我举个例子测试一下我的用户名吗？谢谢！那么你会推荐“表单内联”吗？因为输入框不在同一行上（或者你打算这样做吗？？），所以我不推荐使用“表单内联”“您只是想去掉100%的宽度，还是想让您的盒子看起来更为定制。如果是altter，我建议您创建一个新的id或类，并使用css自己设计样式