模型表单上的 Django Bootstrap input-group-addon 没有分隔字段

Question

我目前正在通过以下方式呈现我的 Django 表单：

<form action="/student/" method="post">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Launch" class="btn btn-primary"/>
</form>

我有多个不同类型的字段，每个字段应用不同的东西，例如验证器和帮助文本。

我有两个字段想添加 bootstrap 跨度。我想在前面加上一个英镑符号的一个货币字段，以及一个我想附加一个百分比符号的百分比字段，我知道这可以使用 bootstrap 来完成，如下所示：

This input field.

<div class="input-group">
  <span class="input-group-addon">$</span>
    <input type="text" class="form-control" placeholder="Price"/>
</div>

但要在我的 Django 模板中执行此操作，需要我将表单分解为特定字段并创建特定字段 html。如This question提出的解决方案。

我正在寻找的是一种在模型或模型形式中指定属性或 class 的方法，它仅适用于特定字段，但会像上面一样呈现它而不会中断填写表格。

谢谢。

信息： Bootstrap-4 Django-2.0.2 Python-3.6.1

Answer 1

在表单中您可以做什么：

from django.forms import TextInput, Textarea

class MyForm(modelForm):
    class Meta:
        widgets = {
            "name": TextInput({"class": "form-control"}),
            "comment": Textarea({"data-validation": "validate"}),
        }

您可以在此 link 关于小部件的 django 文档中阅读有关小部件的信息并了解添加自定义属性的不同方法：https://docs.djangoproject.com/en/2.0/ref/forms/widgets/

Answer 2

您需要继承自Base Widget。如果您使用下面的模板，您可以轻松创建自定义 bootstrap 组。

在forms.py

from django import forms
from django.forms import Widget
from django.utils.safestring import mark_safe

class PrependWidget(Widget):
    """ Widget that prepend boostrap-style span with data to specified base widget """

    def __init__(self, base_widget, data, *args, **kwargs):
        u"""Initialise widget and get base instance"""
        super(PrependWidget, self).__init__(*args, **kwargs)
        self.base_widget = base_widget(*args, **kwargs)
        self.data = data

    def render(self, name, value, attrs=None):
        u"""Render base widget and add bootstrap spans"""
        field = self.base_widget.render(name, value, attrs)
        return mark_safe((
            u'<div class="input-group mb-3">'
            u'  <div class="input-group-prepend">'
            u'    <span class="input-group-text" id="basic-addon1">%(data)s</span>'
            u'  </div>'
            u'  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">'
            u'</div>'
        ) % {'field': field, 'data': self.data})

class MyForm(forms.Form):
    example_field = forms.CharField(max_length=255, min_length=1, label='', required=False,
                              widget=PrependWidget(base_widget=forms.TextInput, data='$'))

Source

模型表单上的 Django Bootstrap input-group-addon 没有分隔字段

Django Bootstrap input-group-addon on Model Form without separating fields

html

css

python

django

twitter-bootstrap-4