Djangocrispyforms在sam上有字段和按钮

Question

我需要在同一行有一个按钮的引导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(之前。你的课也不应该有。在

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

我本打算推荐使用PrependedAppendedText，但是the template假设您是在附加文本而不是按钮，因此除非您重写模板（例如PrependedAppendedText.template = 'custom_appended_prepended_text.html'），否则这是行不通的。如果您想走这条路，只需将原始模板复制到自定义模板中，删除{{ crispy_appended_text|safe }}的第二个实例所在的span，然后使用如下代码：

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 #。接下来，使用以下代码：

^{pr2}$

无需创建自定义模板。另外，在表单顶部的p和字段的占位符文本之间，我不认为您的用户会因为缺少前置文本而感到困惑。在