如何在 Modelform 的网格中呈现 Django CheckoxInput？

Posted 2023-02-24

【中文标题】如何在 Modelform 的网格中呈现 Django CheckoxInput？

【英文标题】：How to render Django CheckoxInput in a grid from Modelform?

【发布时间】：2022-01-03 17:05:13

【问题描述】：

models.py

class MyModel(Model):
    author = ForeignKey(settings.AUTH_USER_MODEL, on_delete=CASCADE)
    title = CharField(max_length=200, default='')
    text = TextField(default='')
    choice_1 = BooleanField(default=False)
    choice_2 = BooleanField(default=False)
    choice_3 = BooleanField(default=False)
    choice_4 = BooleanField(default=False)
    choice_5 = BooleanField(default=False)
    choice_6 = BooleanField(default=False)

    def __str__(self):
        return self.title

forms.py

class MyModelForm(ModelForm):
        class Meta:
        model = MyModel
        fields = [
            'title',
            'text',
            'choice_1',
            'choice_2',
            'choice_3',
            'choice_4',
            'choice_5',
            'choice_6'
        ]

        widgets = 
            'text': Textarea(),
            'choice_1': CheckboxInput(),
            'choice_2': CheckboxInput(),
            'choice_3': CheckboxInput(),
            'choice_4': CheckboxInput(),
            'choice_5': CheckboxInput(),
            'choice_6': CheckboxInput()
        

我正在使用django bootstrap 5 integration 并尝试在这样的网格上呈现复选框：

% extends "base.html" %
% block content %
% load static %
% load bootstrap5 %
% bootstrap_css %
% bootstrap_javascript %
% bootstrap_messages %

(Other code here...)

<div class="row-cols-4">
            % for field in form %
                    <div class="col-sm">% bootstrap_field field layout='horizontal'%</div>
            % endfor %
        </div>

但是，行和列 css（也来自 bootstrap 5）似乎完全没有做任何事情，我并不清楚为什么会这样。我在这里做错了什么？

【参考方案1】：

你也应该包含行类

<div class="row row-cols-4">
    % for field in form %
        <div class="col-sm">% bootstrap_field field layout='horizontal'%</div>
    % endfor %
</div>

【讨论】：

这行得通，谢谢！有没有办法限制每行的列数？

您可以通过将类“row-cols-4”更改为您想要的任何数字来限制它，例如每行 2 列使用“row-cols-2”。查看链接了解更多详情getbootstrap.com/docs/5.0/layout/grid/#row-columns

由于某种原因，它似乎不起作用 - 我的字段呈现的列比限制建议的多得多。嗯。

限制应该有效。尝试从浏览器检查中检查 html 以查看引导字段是否向您的类添加了任何其他内容