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

【问题标题】：Django Bootstrap input-group-addon on Model Form without separating fields模型表单上的 Django Bootstrap input-group-addon 没有分隔字段
【发布时间】：2018-08-18 05:34:40
【问题描述】：

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

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

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

我有两个要添加引导跨度的字段。一个我想在前面加上一个英镑符号的货币字段，一个我想在一个百分比字段后面附加一个百分比符号的字段，我知道这可以使用 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提出的解决方案。

我正在寻找的是一种在模型或模型表单中指定仅适用于特定字段的属性或类的方法，但将按上述方式呈现它而不会破坏表单。

谢谢。

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

【问题讨论】：

标签： python html css django twitter-bootstrap-4

【解决方案1】：

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

在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

【讨论】：

【解决方案2】：

在表格中你可以做什么：

from django.forms import TextInput, Textarea

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

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

【讨论】：