Krispy-forms：为其中一个输入添加 css 类答案

【问题标题】：crispy-forms: add css class for one of the inputsKrispy-forms：为其中一个输入添加 css 类
【发布时间】：2014-09-08 20:09:30
【问题描述】：

在我的forms.py 我有

[...]
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'
[...]

渲染到

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

现在我希望只是名称输入更小，像这样：

[...]
<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>
[...]

（如何）这可以在crispy-forms 中实现吗？

【问题讨论】：

标签： css django twitter-bootstrap twitter-bootstrap-3 django-crispy-forms

【解决方案1】：

给你的助手布局：

self.helper.layout = Layout(
    Field('name'),
    Field('description'),

添加css_class:

Field('field_name', css_class="controls col-md-8 col-xs-7")

这里是文档link

【讨论】：

谢谢，但据我所知，这只会更改 inputs css-classes，而不是 wrapper-div 的 css-classes。但是，在这种情况下，wrapper-div 是决定性的。
在我粘贴的同一个清晰表单布局链接中，有一个 Div() 函数，还有 HTML，所以也许这些可以工作。我将两者都用于我的脆皮表单，用于选择字段上的自定义 css。
谢谢，但我认为HTML() 不能真正提供帮助（或者可以），Div() 将涵盖标签和内部输入，但是我需要更改包装只是输入（不是包装标签的外部div）

【解决方案2】：

我看到了两种可能性：

1。使用 CSS

#div_id_name {
    font-weight: 0.8em;
}

2。覆盖字段模板

你可以override the field template你的领域：

Field('field_name', template='my_field_template.html')

有关参考字段模板，请参阅site-packages/crispy_forms/templates/bootstrap3/field.html。

（3.等待）

Github 上有一个未解决的问题：https://github.com/maraujop/django-crispy-forms/issues/348

【讨论】：

【解决方案3】：

将自定义css类添加到crispy-forms Field的一种方法是将其包装在带有自定义css_class的Div中属性：

from crispy_forms.layout import Layout, Div, Field

self.helper.layout = Layout(
    Div(
        Field('name'), css_class="my_fancy_class_name"
    ),
    Field('description'),
)

例如，现在您可以使用一些 css 自定义您的字段：

.my_fancy_class_name {
    font-size: 200%;  /* You can change the font size */
    color: green;    /* You can change the font color */
    display: none;  /* You can even hide the Field */
}

【讨论】：

【解决方案4】：

您不能将这些字段包装在一个 div 中吗？这不解决你的问题吗？

self.helper.layout = Layout(
    Div(Field('name',maxlength=20),css_class = 'controls col-md-8 col-xs-7'),
    Field('description'),
)

【讨论】：

感谢您的建议，但这是两年多以前的事了。我根本不知道... :(

【解决方案5】：

我已经这样解决了：

Field('name', wrapper_class="col-md-6"),

【讨论】：

【解决方案6】：

让这个工作的唯一方法是不使用一些 form.helpers。

我的配置是

    # from
    self.helper.form_class = 'form-horizontal'
    self.helper.label_class = "col-md-2"
    self.helper.field_class = "col-md-10"
    # -> to
    self.helper.form_class = 'form-vertical'
    #self.helper.label_class = "col-md-2"
    #self.helper.field_class = "col-md-10"
    Fieldset('Address',
                 Div(
                     #I need to set size for every field wrapped in a div
                     Div('tipo_logradouro', css_class="col-md-6"), 
                     Div('logradouro', css_class='col-md-6'),
                     css_class='row'
                 ),
     )

我知道这个老人，但我希望它可以帮助某人。

【讨论】：

【解决方案7】：

我遇到了同样的问题，查看 field.html 模板，我发现有一个叫做 wrapper_class 的东西可以这样使用：

Field('name', wrapper_class="col-md-8 col-xs-7")

您可以在字段布局元素下的此链接https://django-crispy-forms.readthedocs.io/en/latest/layouts.html 中找到文档。

【讨论】：