Django的自举3形式
问题描述:
不响应我写在Django一个简单的形式与该字段:的DateField,CharField,TextArea和自动填充光(查询数据库以自动完成)。所有字段都可以正常工作,但是当我使用html进行渲染时,浏览器窗口变小时不会调整大小。我把jumbotron放在一个容器中,只有按钮实际上是响应式的......其他领域的问题是哪个?Django的自举3形式
HTML:
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/custom.css' %}" type="text/css"/>
<body>
<div class="container">
<div class="jumbotron">
<form method='POST' action'' enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
<table class="rica">
{{ form.as_table }}
</table>
</div>
<input type="submit" class="btn btn-light-blue btn-md btn-block" value="INVIA RICHIESTA">
</form>
</div>
</div>
</body>
答
在你的表格要指定要表单域采取的CSS类。它会根据相应的格式。引导表单字段通常使用class="form-control"
所以你想一个形式类似(这主要是副本,并从实际的形式我用粘贴):
class MyModelForm(forms.ModelForm):
class Meta:
model = MyModel
exclude = ('id',)
widgets = {
'name' : forms.TextInput(attrs={'class' : 'form-control'}),
'image' : forms.FileInput(attrs={'class' : 'form-control'}),
'add1' : forms.TextInput(attrs={'class' : 'form-control'}),
'add2' : forms.TextInput(attrs={'class' : 'form-control'}),
'add3' : forms.TextInput(attrs={'class' : 'form-control'}),
'add4' : forms.TextInput(attrs={'class' : 'form-control'}),
'position' : forms.TextInput(attrs={'class' : 'form-control'}),
'hours' : forms.Select(attrs={'class' : 'form-control'}),
'salary' : forms.Select(attrs={'class' : 'form-control'}),
'website' : forms.URLInput(attrs={'class' : 'form-control'}),
}
答
把class="form-control"
你的文本框,并把style="resize:none
“你的textarea
我添加“类”:“形式控制”和现在与forms.Textarea(文本区域现在浏览器调整工作,但如果用户控制宽度并与小鼠比文本区域的高度不灰色容器方框边缘像上述图像无论如何不作品autocomplete.ModelSelect2(URL =“飞自动完成”,ATTRS = {“类”:“形控制”,“数据占位符”:“帕”,“数据最小 - 输入长度':3}), – lausent
如果哟你不希望用户改变使用文本区域的大小'风格=“调整大小:无”' – HenryM
我偏soved的问题是这样的:“PIP安装Django的自举形式”。 在我插入顶部{%load bootstrap%}并使用{{form | bootstrap}}之后的html中。现在除autocompile-light字段外,所有内容都是响应式的。在forms.py中,我定义了auto = autocomplete.ModelSelect2(url ='fly-autocomplete',attrs = {'class':'form-control','data-placeholder':'Par','data-minimum-input长度':3})。我如何使它响应? – lausent