crispy-forms：为其中一个输入添加css类 [英] crispy-forms: add css class for one of the inputs

问题描述

在我的 forms.py 我有

  。] 
 self.helper.layout = Layout（
 Field（'name'），
 Field（'description'），
）
 self.helper.form_class ='form-horizo​​ntal'
 self.helper.label_class ='col-md-2 col-xs-3'
 self.helper.field_class ='col-md-10 col-xs-9' 
 [...] 
  

b $ b

 < div id =div_id_nameclass =form-group> 
< label class =control-label col-md-2 col-xs-3 requiredFieldfor =id_name> 
名称
< / label 
< div class =controls col-md-10 col-xs-9> 
< input id =id_nameclass =textinput textInput form-controltype =textname =namemaxlength =20> 
< / div> 
< / div> 
< div id =div_id_descriptionclass =form-group> 
< label class =control-label col-md-2 col-xs-3 requiredFieldfor =id_description> 
说明
< / label> 
< div class =controls col-md-10 col-xs-9> 
< textarea id =id_descriptionclass =textarea form-controlrows =10name =descriptioncols =40>< / textarea& 
< / div> 
< / div> 
  

现在我想要名称输入更小this：

  [...] 
< div class =controls col-md-8 col-xs -7> 
< input id =id_nameclass =textinput textInput form-controltype =textname =namemaxlength =20> 
< / div> 
< / div> 
 [...] 
  
 
  http://django-crispy-forms.readthedocs.org>脆饼形式？
解决方案
看到两种可能性：
 
 
 
 1。使用CSS 
 
 
 
  #div_id_name {
 font-weight：0.8em; 
} 
  
 
 
 
 2。覆盖字段模板
 
 
 
您可以覆盖您的字段的字段模板：
 字段'field_name'，template ='my_field_template.html'）
  
对于引用字段模板， c $ c> site-packages / crispy_forms / templates / bootstrap3 / field.html 。
 
 
 
（3.等待）
 
 
 
 Github上有一个开放的问题： https://github.com/maraujop/django-crispy-forms/issues/348  
 
In my forms.py I have
[...]
self.helper.layout = Layout(
    Field('name'),
    Field('description'),
)
self.helper.form_class = 'form-horizontal'
self.helper.label_class = 'col-md-2 col-xs-3'
self.helper.field_class = 'col-md-10 col-xs-9'
[...]
which renders to
<div id="div_id_name" class="form-group">
    <label class="control-label col-md-2 col-xs-3 requiredField" for="id_name">
        Name
    </label
    <div class="controls col-md-10 col-xs-9">
        <input id="id_name" class="textinput textInput form-control" type="text" name="name" maxlength="20">
    </div>
</div>
<div id="div_id_description" class="form-group">
    <label class="control-label col-md-2 col-xs-3 requiredField" for="id_description">
        Description
    </label>
    <div class="controls col-md-10 col-xs-9">
        <textarea id="id_description" class="textarea form-control" rows="10" name="description" cols="40"></textarea>
    </div>
</div>
Now I would like just the name-input to be smaller, like this:
[...]
<div class="controls col-md-8 col-xs-7">
        <input id="id_name" class="textinput textInput form-control" type="text" name="name" maxlength="20">
    </div>
</div>
[...]
(How) can this be achieved in crispy-forms?
解决方案
I see two possibilities:

1. Use CSS

#div_id_name {
    font-weight: 0.8em;
}


2. Override the field template

You can override the field template of your field:
Field('field_name', template='my_field_template.html')
For a reference field template, see site-packages/crispy_forms/templates/bootstrap3/field.html.

(3. Waiting)

There's an open issue on Github for this: https://github.com/maraujop/django-crispy-forms/issues/348

                        
这篇关于crispy-forms：为其中一个输入添加css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！