引导字段奇怪 [英] Bootstrap Fields Odd Looking

问题描述

我的字段看起来很奇怪，因为他们是巨大的字段输入和占用整个屏幕。我恐怕我没有遵循我的编码的最佳做法。此外，当我输入错误的用户名和/或密码，它只是变成绿色，没有意义。
目标：更好的字段样式，使错误消息更加明显。

My fields look very odd for they are huge field inputs and take up the whole screen. I am afraid I am not following best practice with my coding. Also, when I input the wrong username and/or password it just turns green and makes no sense. Goal: Better styling of fields and to make error messages more visible.

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>

当前

可能的修复（但没有什么我想使用，因为我将手动创建错误情况） em>

Current Possible Fix (But no something I want to use for I would have to manual create error cases)

1. 手动呈现您的表单字段（@Selcuk）

b $ b

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

推荐答案

c $ c> form-control 添加到输入标签的类会使这些框全部变成这样。

The form-control class you add to your input tags is causing the boxes to go full width like that.

所有文本< input> ，< textarea> 和 ;默认情况下，将
.form-control中的> c>元素设置为 width：100％;

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- 在 .form-group 中封装标签和
控制=http://getbootstrap.com/css/#forms =nofollow> http://getbootstrap.com/css/#forms

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

这篇关于引导字段奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！