Django crispy-forms：带有 TextArea 字段的 2 列表单

Question

我正在尝试使用 crispy-forms Layouts 创建一个好看的 2 列表单。当其中 1 个字段是 TextArea 字段时，它会变得混乱。 （当我没有 TextArea 字段时，一切正常）

这段代码：

## forms.py
class BasicForm(forms.Form):
   label_1 = forms.CharField(label='label1')
   label_2 = forms.CharField(label='label2')
   label_3 = forms.CharField(label='label3',help_text='This is help text', widget=forms.Textarea)
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Row(
                Field('label_1', wrapper_class='col-md-6', css_class='row-fluid'),
            ),

            Row(
                Field('label_2', wrapper_class='col-md-6', css_class='row-fluid'),
                Field('label_3', wrapper_class='col-md-6')
            )
        )

产生这种格式：

还有这段代码：

       self.helper.layout = Layout(
        Row(
            Field('label_1', wrapper_class='col-md-6', css_class='row-fluid'),
            Field('label_3', wrapper_class='col-md-6')
        ),

        Row(
            Field('label_2', wrapper_class='col-md-6', css_class='row-fluid')
        )
    )

产生这种格式：

我想将 2 列分开，每 1 列应堆叠到顶部，仅相对于自身。

编辑

（添加我想要的最终结果草图）

类似：

说我有更多的领域：

Answer 1

看起来您只需要稍微更改布局 - 那些 Row 对象充当清除元素，这就是为什么您的 label_2 字段显示在 低于 @ 的基线987654323@ textarea - 因为它已被清除。

所以解决方案是创建 2 列，使用 Div 类，然后将 wrapper_class 属性放到您的字段中。您也可以删除 Field 对象，而只使用字段名称（因为您不需要指定任何属性）：

## forms.py
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Row, Div, Layout

class BasicForm(forms.Form):
   label_1 = forms.CharField(label='label1')
   # label_2 uses a widget with custom attribute(s)
   label_2 = forms.CharField(label='label2', widget=forms.TextInput(attrs={'readonly': 'readonly'}))
   label_3 = forms.CharField(label='label3',help_text='This is help text', widget=forms.Textarea)
   def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Row(
                Div('label_1', 'label_2',
                    css_class='col-md-6'
                ),
                Div(
                    'label_3',
                    css_class='col-md-6'
                ),
            ),
        )