5

我需要在同一行上有一个带有按钮的引导 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'
        )
    )
4

1 回答 1

6

首先，我注意到在你对serial字段的定义中，你忘了在widget=前面加上forms.TextInput(. 另外，您p也应该alert上课，而不仅仅是alert-info.

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

我将推荐使用PrependedAppendedText，但模板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')),

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

于 2013-02-22T04:39:02.580 回答