twitter-bootstrap 脆皮形式：为输入之一添加 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24812267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
crispy-forms: add css class for one of the inputs
提问by speendo
In my forms.pyI have
在我的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'
[...]
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 justthe 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?
（如何）这可以以酥脆的形式实现？
回答by Aaron Lelevier
回答by Danilo Bargen
I see two possibilities:
我看到两种可能性：
1. Use CSS
1. 使用 CSS
#div_id_name {
font-weight: 0.8em;
}
2. Override the field template
2.覆盖字段模板
You can override the field templateof your field:
您可以覆盖字段的字段模板：
Field('field_name', template='my_field_template.html')
For a reference field template, see site-packages/crispy_forms/templates/bootstrap3/field.html.
有关参考字段模板，请参阅site-packages/crispy_forms/templates/bootstrap3/field.html。
(3. Waiting)
(3. 等待)
There's an open issue on Github for this: https://github.com/maraujop/django-crispy-forms/issues/348
Github 上有一个未解决的问题：https: //github.com/maraujop/django-crispy-forms/issues/348
回答by Vantage
The only way to get this working is not using some form.helpers.
获得此功能的唯一方法是不使用某些 form.helpers。
My config is
我的配置是
# 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'
),
)
I know this old but I hope it helps someone.
我知道这很旧，但我希望它可以帮助某人。
回答by elke
One way to add a custom css class to a crispy-forms Fieldwould be to wrap it in a Divwith a custom css_classattribute:
将自定义 css 类添加到脆表单字段的一种方法是将其包装在具有自定义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'),
)
For example, now you can customize your Field with some css:
例如，现在您可以使用一些 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 */
}
回答by durdenk
Cant you wrap those fields in a div? Doesnt this solve your problem?
你不能将这些字段包装在一个 div 中吗？这不能解决您的问题吗？
self.helper.layout = Layout(
Div(Field('name',maxlength=20),css_class = 'controls col-md-8 col-xs-7'),
Field('description'),
)
回答by oscarmlage
I've solved it like this:
我是这样解决的：
Field('name', wrapper_class="col-md-6"),
