更改多种表单大小 Django Bootstrap答案

【问题标题】：Change Multiple Form Sizes Django Bootstrap更改多种表单大小 Django Bootstrap
【发布时间】：2017-03-01 20:28:01
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： python html css django twitter-bootstrap

【解决方案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'
        )
    )

【讨论】：

【解决方案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;
}

【讨论】：