css - 在 django 中格式化复选框

Question

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

我想让它们内联且可读，不幸的是使用脆的形式会使它们彼此太接近。

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

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

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

过滤器.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;
  }

标签： cssdjangocheckbox

Answer 1

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

安装后你可以这样做：

<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>元素。