Bootstrap Django简洁地形成动态label_class和field_class

4ktjp1zp 于 2023-06-04 发布在 Bootstrap

关注(0)|答案(2)|浏览(162)

我试图创建一个表单布局与几个领域是一个不同的大小比其他领域。什么是最好的方式来做到这一点使用脆的形式？例如，我将表单按行进行布局，大多数行都有两个字段，但偶尔会有一个字段占据整行。

--------------------------------------------------
| First Name            | Last Name              |
--------------------------------------------------
| User Name             | Email                  |
--------------------------------------------------
| Bio                                            |
--------------------------------------------------

在上面的示例布局中，每个字段都由一个标签和实际HTML中的文本输入组成（我只是不知道如何在问题中显示）。我使用Bootstrap 3，所以在前两行，我希望标签有一个'col-sm-2'的类，输入字段有一个'col-sm-4'的类，这样当渲染时，它们每行显示两个字段（即12列）。但是，对于第三行的“Bio”字段，我希望输入字段为“col-sm-10”以占据整行。
下面是一些示例代码，这些代码足够接近，有人可能能够提供帮助。

self.helper = FormHelper(self)
self.helper.form_tag = False
self.helper.form_class = 'form-horizontal'
self.helper.label_class = 'col-sm-2'
self.helper.field_class = 'col-sm-4'
self.helper.layout = Layout(
    MultiField(
        'Profile Information',
        Div('first_name', 'last_name'),
        Div(css_class='clearfix'),
        Div('username', 'email'),
        Div(css_class='clearfix'),
        Div('bio', css_class='col-sm-10'),
    ),
)

我已经尝试使用Div、Field和Row的几种不同组合，并使用css_class和wrapper_class的组合，以及尝试创建“自定义”属性，但没有任何效果可以给予我想要的布局。我甚至尝试了几种不同的嵌套Div（Field）类型结构的组合，但都不起作用。
似乎没有一种方法可以动态地更改helper.field_class中的“Bio”字段行。使用HTML方法似乎是错误的，但这就是我所能想到的。
什么是正确的方式来做到这一点使用脆的形式？

twitter-bootstrap

来源：https://stackoverflow.com/questions/22494904/django-crispy-forms-dynamic-label-class-and-field-class

2条答案

按热度按时间

nqwrtyyt1#

我有一个类似的函数（专为bootstrap 2设计），它可以让你完成一部分;它不能像你要求的那样处理水平表单，但是你可以生成动态行：

from crispy_forms import helper
from crispy_forms import layout

def addBootstrapRow(helper, firstField, numFields, wrapperClasses):

        # set classes used for all fields if only one provided
        if type(wrapperClasses) in [str, unicode]:
            wrapperClasses = [wrapperClasses]*numFields

        # find first field, apply wrapper_class for each
        first = helper.layout.index(firstField)
        for i, cls in enumerate(wrapperClasses):
            helper[first+i].wrap(layout.Field, wrapper_class=cls)

        # put all these fields into a row
        helper[first:first+numFields].wrap_together(layout.Div, css_class="row-fluid")

要获得与问题中的格式类似（但不完全相同）的格式，您可以这样做：

class MyForm(ModelForm):

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.helper = helper.FormHelper(self)
        addBootstrapRow(self.helper, 'first_name', 2, "span6")  # all fields same
        addBootstrapRow(self.helper, 'username', 2, ["span4", "span8"])  # fields diff.
        addBootstrapRow(self.helper, 'bio', 1, "span12")

可能不是你的确切解决方案，它可能会帮助其他人偶然发现这个问题，至少（像我）。

赞(0）回复(0）举报 2023-06-04

ki0zmccv2#

问题

据我所知，这个问题没有简单的解决办法。
2014年，创建了关于为每个字段单独设置label_class的GitHub issue。但是，这个问题被crispy forms开发人员关闭为超出范围。
在2021年，创建了一个GitHub pull request，其更改允许在单个字段上使用label_class和field_class。但是，由于PR作者的不活动**，此PR已**关闭。

可能的解决方案

this question中的答案可能会帮助您解决这个问题。一个可能的解决方案是创建一个自定义字段模板-参见this answer。

赞(0）回复(0）举报 2023-06-04

我来回答

Bootstrap Django简洁地形成动态label_class和field_class

2条答案

问题

可能的解决方案

相关问题

热门标签

最新问答