在django中自定义单选按钮

模板代码为

{{ form.incident_live }}

forms.py

INCIDENT_LIVE = (
    ('0', 'Live'),
    ('1', 'Test'),
)
class IncidentForm(forms.ModelForm):
     incident_live = forms.ChoiceField(widget=forms.RadioSelect(),choices=INCIDENT_LIVE)

上面的代码给了我一些单选按钮，它们的选项是垂直排列的，但我希望它是水平排列的，也就是说，等价的html应该是

livetest

---

提前感谢

听起来像是定制小部件渲染器的工作：

from django.utils.safestring import mark_safe

class HorizRadioRenderer(forms.RadioSelect.renderer):
    """ this overrides widget method to put radio buttons horizontally
        instead of vertically.
    """
    def render(self):
            """Outputs radios"""
            return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))

class IncidentForm(forms.ModelForm):
     incident_live = forms.ChoiceField(widget=forms.RadioSelect(renderer=HorizRadioRenderer),choices=INCIDENT_LIVE)

取自

这个“alecxe”的解决方案实际上并不适合我。 但添加CSS代码确实有效：

{%block style%}
.收音机{
显示：内联块；
}
{%endblock%}

根据Django文档，“attrs”是一个字典，包含要在呈现的小部件上设置的HTML属性

考虑到这一点，基于表单的简单解决方案如下所示：

class IncidentForm(forms.ModelForm):
    incident_live = forms.ChoiceField(
        widget=forms.RadioSelect(attrs={
            'display': 'inline-block',
        }),
        choices=INCIDENT_LIVE
    )

#试试李{
显示：内联块；}
{%csrf_令牌%}
{{form.as_p}}
提交

---

实际上，解决方案应该非常简单。都在Django

以下是我在一些表格中所做的工作：

在布局表单字段的模板中，我将执行以下操作：

{% for field in form.visible_fields %}
    {{ field.errors }}
    {% if field.name == "<some_field_name>" %}
    ...
    ...
    {% elif field.name == "<radio_field_name>" %}
        {% for radio in field %}
            <label for="{{ radio.id_for_label }}">
                {{ radio.choice_label }}
                <span class="radio">{{ radio.tag }}</span>
            </label>
        {% endfor %}
    {% endif %}

{% endfor %}

{%for form.visible\u fields%}
{{field.errors}}
{%if field.name==“”%}
...
...
{%elif field.name==“”%}
{%字段中的无线电为%}
{{radio.choice_label}
{{radio.tag}
{%endfor%}
{%endif%}
{%endfor%}

结果收音机选择：

到目前为止，这已经奏效了。

从我的灵感中，我想出了这个方法，让收音机与引导一起工作。这是像我这样对HTML和CSS一无所知的人的参考。这是使用Boostrap 5，Django 3.1.6：

格式。py:

from django import forms

class ExampleForm(forms.Form):
    choice = forms.ChoiceField(
        label = 'test',
        choices = zip([1,2,3], ['a','b','c']),
        widget = forms.RadioSelect(
            attrs = {'class' : 'form-check-input'}
        )
    )

        {% for field in form.visible_fields %}
            {{ field.errors }}
            {% for radio in field %}
                <div class="form-check form-check-inline">
                    {{ radio }}
                </div>
            {% endfor %}
        {% endfor %}

在html模板中：

from django import forms

class ExampleForm(forms.Form):
    choice = forms.ChoiceField(
        label = 'test',
        choices = zip([1,2,3], ['a','b','c']),
        widget = forms.RadioSelect(
            attrs = {'class' : 'form-check-input'}
        )
    )

        {% for field in form.visible_fields %}
            {{ field.errors }}
            {% for radio in field %}
                <div class="form-check form-check-inline">
                    {{ radio }}
                </div>
            {% endfor %}
        {% endfor %}

{%for form.visible\u fields%}
{{field.errors}}
{%字段中的无线电为%}
{{radio}}
{%endfor%}
{%endfor%}

只是没有测试它，出现了这个错误“呈现时捕获的名称错误：全局名称“mark_safe”未定义”哦，当然，添加了导入语句，请尝试一下。是的，它工作正常，我接受了你的答案。还有一个hep可以减少两个选项之间的空间，因为两个选项之间的空间超过2英寸，需要它来减少最小值。突然意识到问题已经在这里被问过了-标记为重复。如果您尝试这样的smth会怎么样：

mark_safe（u'\n.join（[u'%s\n'%w.strip（），代表self中的w]）

？Nice的可能副本，这非常有效（尽管我必须执行

#key pic li{display:inline；}

，其中

key pic

是包含列表的div id。）不确定人们为什么使用更复杂的版本。请对您的答案发表评论。