Bootstrap Fields奇怪的看

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类会导致这些框的宽度达到全宽。

  

所有文字<input>，<textarea>和<select>元素   .form-control默认设置为width: 100%;。包裹标签和   控制.form-group以获得最佳间距。

     

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