在django-crispy-forms中创建控件行

Question

使用django-crispy-forms我想在一行上组合两个(或更多)小部件.另请参见附带的示例.我认为应该可以使用该库,尽管文档中包含有关此问题的示例,但源代码也没有帮助.那么有没有人设法使用django-crispy-forms获得类似的结果？

这种表单所需的HTML如下所示:

<div class="control-group">
    <label for="desc" class="control-label">
        Description
    </label>
    <div class="controls controls-row">
        <input class="span2" maxlength="255" type="text" id="desc">
        <input class="span3" maxlength="255" type="text">
    </div>
</div>

Answer 1

是.使用布局

这是一个让你前进的示例片段.

def __init__(self, *args, **kwargs):
    self.helper = FormHelper()
    self.helper.form_method = 'get'
    self.helper.form_id = 'id_search'
    self.helper.layout = Layout(
            Div(
                Div(Field('arrival_date', css_class='span12 input-large calendar',
                    placeholder='dd/mm/yyyy'), css_class='span5'),
                Div(Field('departure_date', css_class='span12 input-large calendar',
                    placeholder='dd/mm/yyyy'), css_class='span5'),
                Div(Field('rooms', css_class='span12'), css_class='span2 styled-rooms'),
                css_class='row-fluid',
            ),
        )

Answer 2

您可以通过在布局对象中的 `def init (self, *args, **kwargs): 中定义 HTML 对象来实现。此 HTML 将为您提供满足您需求的所有自由。

还有另一种方法。要在模板文件夹中实际创建自己的模板，然后在布局对象中定义该模板的路径示例：

Field('name', template='path/to/template/single_line_input.html'),

其中“名称”实际上是一个小部件。

当然，您始终可以尝试在应用程序的 CSS 文件中进行操作，类似float: left或display: inline可能有帮助，但您必须在应内联显示的小部件上定义类。对于不熟悉前端 CSS 的人来说，这可能有点棘手（因为结果在不同的浏览器和不同的分辨率下可能会有所不同，所以不用说需要进行一些测试）。您遇到的问题主要是浏览器默认将输入字段呈现为块对象，因此即使它们的宽度较小，它们也会占据一行中的所有空间。