Django 脆皮表格制表符无法更改 css

Question

在我的表单中，我想更改选项卡的样式，如果我将 css_class 添加到 TabHolder，它不会呈现它，它只会保留默认值 class。这是模型的init。

def __init__(self, *args, **kwargs):
    self.user = kwargs.pop('user', None)
    super().__init__(*args, **kwargs)
    self.helper = FormHelper()
    self.helper.form_tag = True
    self.helper.form_method = 'POST'
    self.helper.layout = Layout(
        TabHolder(
            Tab(_('Company'),
                'name',
                css_class='nav-item active'),
            Tab('Address',
                'country',
                css_class='nav-item'),
            Tab('Info',
                'email', 'phone', 'website',
                css_class='nav-item'),
            css_class='nav nav-tabs nav-tabs-highlight nav-justified mb-0'
        ),
        ButtonHolder(
            Submit('submit', "Submit form", css_class='btn btn-primary')
        ),
    )

正如您在 TabHolder 中看到的那样，有 css_class='nav nav-tabs nav-tabs-highlight nav-justified mb-0' 但它一直只显示 css_class='nav nav-tabs'

Answer 1

CSS_class 在选项卡模板中进行了硬编码。最简单的修复可能是覆盖模板。

https://github.com/django-crispy-forms/django-crispy-forms/blob/master/crispy_forms/templates/bootstrap4/layout/tab.html

Answer 2

我遇到了同样的问题，我认为换一种方式解决会更好。我更喜欢侵入性较小的方法。我在模板中使用了 javascript，它调整了元素 class。只需将上面的代码添加到您的模板中即可。

    <script>
        function load() {
            document.getElementById('tab-content').getElementsByClassName('nav nav-tabs')[0].className = "nav nav-tabs bg-nav-pills nav-justified mb-3";
        }
        window.onload = load;
    </script>

Django 脆皮表格制表符无法更改 css

Django crispy forms tabholder can't change css

django

bootstrap-4

django-forms

django-crispy-forms