问题描述
在Vitor Freitas' tutorial之后,我正在学习如何使用Crispy Forms。
但是,当在表格和模板中粘贴其确切的代码时,文本框并没有按预期水平填充该空间。
代码(从Vitor的网站复制):
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout,Submit,Row,Column
STATES = (
('','Choose...'),('MG','Minas Gerais'),('SP','Sao Paulo'),('RJ','Rio de Janeiro')
)
class AddressForm(forms.Form):
email = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Email'}))
password = forms.CharField(widget=forms.Passwordinput())
address_1 = forms.CharField(
label='Address',widget=forms.TextInput(attrs={'placeholder': '1234 Main St'})
)
address_2 = forms.CharField(
widget=forms.TextInput(attrs={'placeholder': 'Apartment,studio,or floor'})
)
city = forms.CharField()
state = forms.ChoiceField(choices=STATES)
zip_code = forms.CharField(label='Zip')
check_me_out = forms.BooleanField(required=False)
def __init__(self,*args,**kwargs):
super().__init__(*args,**kwargs)
self.helper = FormHelper()
self.helper.layout = Layout(
Row(
Column('email',css_class='form-group col-md-6 mb-0'),Column('password',css_class='form-row'
),'address_1','address_2',Row(
Column('city',Column('state',css_class='form-group col-md-4 mb-0'),Column('zip_code',css_class='form-group col-md-2 mb-0'),'check_me_out',Submit('submit','Sign in')
)
预期的布局:
我的实验的实际结果:
-
base.html
<!DOCTYPE html>
{% load static %}
<html lang='sp'>
<head>
<Meta charset="utf-8"/>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<title>
{% block title %}
Page title
{% endblock title %}
</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{% url 'home'%}">
<img src="{% static 'img/blc_logo.jpg'%}"
alt="logo"
height="40em"/>
My awesome page
</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#mainMenu"
aria-controls="mainMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainMenu">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#" id="userMenu"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
{% if user.is_type_one %}
<a class="dropdown-item"
href="{% url 'type_one:home' %}">
My panel
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
My account
</a>
{% elif user.is_type_two %}
<!-- Todo: create type_two menu -->
{% endif %}
<div class="dropdown-divider"></div>
<a class="dropdown-item"
href="{% url 'logout' %}">
Log out
</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a class="btn btn-secondary"
href="{% url 'login' %}">
Log in
</a>
<a class="btn btn-primary"
href="{% url 'users:signup' %}">
Sign up
</a>
</form>
{% endif %}
</div>
</div>
</nav>
<div class="container">
<ol class="breadcrumb my-4">
{% block breadcrumb %}
{% endblock breadcrumb %}
</ol>
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
-
test_form.html
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
{% crispy form_test %}
{% endblock content %}
所以...我不知道我在想什么。你能指出我正确的方向吗?
解决方法
本教程设置了设置CRISPY_TEMPLATE_PACK ='bootstrap4'。也许您使用其他引导程序版本,或者忘记设置此设置?