Question

我需要一个带有同一行按钮的bootstrap PrependedText字段。我可以在同一行上获取它，但它在文本框之前显示按钮，之后我想要它。我做错了什么以及如何让它在框后面显示（在文本字段的右侧）

serial = forms.CharField(forms.TextInput(attrs={'autocomplete':'off',}))
    serial.label = ''

    helper = FormHelper()
    helper.form_class = 'form-horizontal'
    helper.form_action = 'checkout'
    helper.form_method = 'post'

    helper.layout = Layout(
        HTML("<p class='alert-info'>Please scan the items barcode or enter the serial # in the field below.</p>"),
        Div(
            Div(PrependedText('serial', 'Serial #',css_class='input-xlarge'), css_class='span1'),
            Div(Submit('submit','Submit', css_class='btn-primary'), css_class='span1'),
            css_class='row-fluid'
        )
    )

Answer 1

首先，我注意到在您对serial字段的定义中，您忘记将widget=放在forms.TextInput(之前。此外，您的p也应该有alert课程，而不仅仅是alert-info。

我能够通过将span1的第一个实例更改为span6来解决问题，但我绝对不建议这样做，因为调整窗口大小会导致布局问题，甚至可以实现似乎根本没有提交按钮！

我打算建议使用PrependedAppendedText，但the template会假设您要附加文字而不是按钮，因此除非您覆盖模板（例如{{ 1}}）。如果您想要使用该路线，只需将原始模板复制到自定义模板，删除PrependedAppendedText.template = 'custom_appended_prepended_text.html'的第二个实例所在的span，然后使用以下代码：

{{ crispy_appended_text|safe }}

但是，我确实有另一个建议。我更喜欢这个解决方案，但这意味着放弃前置文本以支持占位符文本。首先，除了将字段的

Div(PrependedAppendedText('serial', 'Serial #', '<button class="btn btn-primary">Submit</button>', css_class='input-xlarge'), css_class='span1'),

属性设置为autocomplete之外，还要将其off属性设置为class，将其input-xlarge属性设置为placeholder。接下来，使用以下代码：

Serial #

无需创建自定义模板。此外，在表单顶部的FieldWithButtons('serial', StrictButton('Submit', type='submit', css_class='btn-primary')),和字段的占位符文本之间，我认为您的用户不会因缺少前置文本而感到困惑。

django-crispy-forms在同一行上有字段和按钮

1 个答案: