我正在使用deform 2与 Bootstrap 3 一起渲染一些表单,我想创建一个水平表单,如图 here ,但 demo-site 上的所有示例,不是水平表单的示例(标签位于输入元素旁边)。
我尝试过使用 form_class="form-horizontal"
和 bootstrap_form_style="form-horizontal"
( deform_bootstrap )。使用上述内容时,它确实添加了类 form-horizontal
,但是我不想只是向表单元素添加一个类。
如何将其余类名添加到表单的其余部分,使其成为水平表单,如 bootstrap site 上所示。 ?
最佳答案
我想通了,在变形模板中(我重写了它们)我做到了:
mapping_item.pt:
<div tal:define="error_class error_class|field.widget.error_class;
description description|field.description;
title title|field.title;
oid oid|field.oid;
hidden hidden|field.widget.hidden;
category category|field.widget.category;
structural hidden or category == 'structural';
required required|field.required;"
class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''}"
title="${description}"
id="item-${oid}"
tal:omit-tag="structural"
i18n:domain="deform">
<!-- <div class="col-sm-12"> -->
<label for="${oid}"
class="control-label col-sm-3 col-md-3 ${required and 'required' or ''}"
tal:condition="not structural"
id="req-${oid}"
>
${title}
</label>
<div class="col-sm-9 col-md-9">
<div tal:define="input_prepend field.widget.input_prepend | None;
input_append field.widget.input_append | None"
tal:omit-tag="not (input_prepend or input_append)"
class="input-group">
<span class="input-group-addon"
tal:condition="input_prepend">${input_prepend}</span
><span tal:replace="structure field.serialize(cstruct).strip()"
/><span class="input-group-addon"
tal:condition="input_append">${input_append}</span>
</div>
<p class="help-block"
tal:define="errstr 'error-%s' % field.oid"
tal:repeat="msg field.error.messages()"
i18n:translate=""
tal:attributes="id repeat.msg.index==0 and errstr or
('%s-%s' % (errstr, repeat.msg.index))"
tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
${msg}
</p>
<p tal:condition="field.description and not field.widget.hidden"
class="help-block" >
${field.description}
</p>
</div>
</div>
label
中的通知我添加了col-sm-3 col-md-3
我还添加了<div>
类(class):class="col-sm-9 col-md-9"
这使得该元素(即标签+输入)“水平”(显示在同一行中):
在 form.pt
,在我添加的表单标签中:
class="deform ${field.bootstrap_form_style | 'form-horizontal'}
我在定义表单布局时也这样做:
agent = colander.SchemaNode(
colander.String(),
validator=agent_validator,
widget=widget.AutocompleteInputWidget(
size=40,
style="width: 300px",
min_length=3,
values=url,
css_class="form-control"
),
title="Agent*")
希望这对您有所帮助。
关于python - 如何用变形2制作水平形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23954772/