在 django 中格式化复选框答案

【问题标题】：Formatting checkboxes in django在 django 中格式化复选框
【发布时间】：2020-09-30 05:02:15
【问题描述】：

我正在尝试在我的表单中添加一些复选框并使它们看起来不错。问题是，当我使用 {{form.checkBoxFilter}} 时，输出如下：

我想让它们内联且可读，但不幸的是，使用清晰的表单会使它们彼此靠得太近。

我发现循环遍历元素会将它们置于内联，但它们仍然彼此靠近（它们的标签比下面显示的要长得多）。

{% for x in filter.weights%} {{x}} {%endfor%}

在这种情况下我的 CSS 应该放在哪里？

filters.py：

    weights = django_filters.MultipleChoiceFilter(
        label = "Filter by weight",
        required=False,
        widget=forms.CheckboxSelectMultiple,
        choices=OZ,
        method = 'filter_by_checkbox'
    )

直接添加到 static/css 中不起作用：

   input[type=checkbox]
  {
   padding: 20px;
   margin: 20px 15px 0px 3px;
  }

【问题讨论】：

标签： css django checkbox

【解决方案1】：

您可以使用 css 将它们分开。例如，您可以在 base.html 中使用引导样式表（阅读 here）。

安装后你可以这样做：

<div class="container">
    <div class="row mb-1">
        {% for x in filter.weights %}  
            <div class="col-sm-XX">
                 {{x}}
            </div>
        {%endfor%}
    </div> 
</div>

其中 XX 应该是合适的大小。请记住，引导程序将页面分为 12 个部分。它还带有一些 css 功能。

更新您的编辑：为您的复选框分配一个类，然后在 css 中选择该类。您也可以使用内置的x.as_p 将其显示为<p> 元素。

【讨论】：