使用“as_crispy_field”在表单内联中呈现单个字段

Posted 2023-02-24

【中文标题】使用“as_crispy_field”在表单内联中呈现单个字段

【英文标题】：render a individual field in a form-inline using 'as_crispy_field'

【发布时间】：2016-07-17 11:42:09

【问题描述】：

我需要从我的Form 渲染单个字段，所以我使用来自crispy-forms 的过滤器|as_crispy_field 并使用引导程序3 作为样式，但我需要在form-inline 中执行此操作，就像这里的第一个示例@ 987654321@ 所以我试着这样做：

template.html

<form class="form-inline">% csrf_token %
      form.name|as_crispy_field 
</form>

但标签显示在 TextInput 字段上方，而不是我需要的内联。 如何使用 |as_crispy_field 做到这一点？

编辑：这是用crispy渲染后的HTML

<form class="form-inline"><input type='hidden' name='csrfmiddlewaretoken' value='****...' />
    <div id="div_id_name" class="form-group">
            <label for="id_name" class="control-label  requiredField">
                Name<span class="asteriskField">*</span>
            </label>
                <div class="controls ">
                    <input class="form-control textinput textInput form-control" id="id_name" maxlength="100" name="name" type="text" />
                </div>
    </div>
</form>

【问题讨论】：

您的视口是否“至少 768 像素宽”？如果是这样，请发布清晰呈现的 HTML。

是的，已经发布了渲染的 HTML

【参考方案1】：

您链接到的标签位于字段左侧，在 Crispy 中称为“form-horizo​​ntal”。它是explained here。您需要设置这些helper 属性

helper.form_class = 'form-horizontal'
helper.label_class = 'col-lg-2'
helper.field_class = 'col-lg-8'

实际的内联表单，字段内显示的标签位于同一页面的正下方。你只需要设置两个辅助属性

helper.form_class = 'form-inline'
helper.field_template = 'bootstrap3/layout/inline_field.html'

如果我正确理解了您的问题，那应该可以。