Question

我正在尝试使用CSS设置我的Django表单样式。我想要它，以便我可以在一行和不同宽度上有多个字段，但也有一些字段可以拉伸容器的整个宽度。我发现很难做到。

我尝试过使用Bootstrap的网格系统，但是我无法指定哪个div来放置哪个表单元素。我也尝试过使用TextAreas看到的一些答案，并指定行数和列数，如下所示：

widget=forms.Textarea(attrs={'cols': 8, 'rows': 1})

我想知道是否有一种方法可以在特定输入周围添加div而无需在模板中使用大量if else语句。

我可以指定一个已包含div的模板，但我很确定我只能使用一个表单模板？

Answer 1

解决此问题的最简单方法是使用Crispy forms，它支持渲染Bootstrap兼容布局。您可以在表单的帮助器中轻松定义div及其类。以下是一行中有两个文本字段的示例：

class SampleForm(Form):

    name = CharField()
    surname = CharField()

    helper = FormHelper()
    helper.layout = layout(
        Div(
            Div('name', css_class='col-sm-6'),
            Div('surname', css_class='col-sm-6'),
            css_class='row'
        )
    )

Answer 2

您可以定义自己的宽度：5个细胞为20％，7个细胞为14,28％

.col-xs-20, .col-sm-20, .col-md-20,.col-lg-20,/* 5 Cells */{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-20{
    width: 20%;
    float: left;
 }
.col-sm-20{
  width: 20%;
  float: left;
}
.col-md-20{
  width: 20%;
  float: left;
}
.col-lg-20{
  width: 20%;
  float: left;
}

更改多个表单大小Django Bootstrap

2 个答案: