Symfony3 使用 Bootstrap 设置表单标签/小部件宽度答案

【问题标题】：Symfony3 Using Bootstrap Set Form Label/Widget WidthsSymfony3 使用 Bootstrap 设置表单标签/小部件宽度
【发布时间】：2016-07-29 23:04:57
【问题描述】：

我在 Symfony3 应用程序中使用新的内置引导样式。

twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"
    form_themes:
            - bootstrap_3_horizontal_layout.html.twig

我正在使用它通过它的组件（标签和小部件）呈现表单。
所有标签都有一个宽度为 col-xs-2 的类，宽度为 col-xs-10 的小部件类。

<div class="form-group">
    {{ form_label(form.name) }}
    <div class="col-md-9">
       {{ form_widget(form.name) }}
    </div>
    <div class="col-md-offset-3 col-md-9">
         {{ form_errors(form.name) }}
    </div>
</div>

我如何设置（全局在所有表单上，或在 form_row 上，或在每个组件上，例如 form_label/form_widget）要使用的类。我已经尝试添加类，但这只是添加到现有类中而不是替换它。

{{ form_label(form.name, 'gfdg', {'label_attr': {'class': 'col-md-3'} }) }}

呈现class="col-xs-2 col-md-3"

【问题讨论】：

标签： css twitter-bootstrap symfony-forms symfony

【解决方案1】：

我知道这是一个老问题，但这可能对将来的某人有所帮助。

如果你想全局设置它，只需创建一个树枝文件，例如form/bootstrapCols.html.twig，然后添加这两个块：

{% block form_label_class -%}
col-sm-2
{%- endblock form_label_class %}

{% block form_group_class -%}
col-sm-10
{%- endblock form_group_class %}

这样您将覆盖bootstrap_3_horizontal_layout.html.twig 中的那些块。将 col-sm-2 和 col-sm-10 更改为您需要的任何内容，并使用额外的表单主题更新配置文件，如下所示：

twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"
    form_themes: ['bootstrap_3_horizontal_layout.html.twig','form/bootstrapCols.html.twig']

如果你想更改col- 只为一个视图，那么只需在你的树枝视图文件中使用这个：

{% form_theme formname with ['bootstrap_3_horizontal_layout.html.twig', _self] %}

并在同一个文件中添加块 form_label_class 和 form_group_class 以及您需要的类。

【讨论】：

感谢您提供此信息。如果有人需要，它仍然有效并且与 Symfony 5 和 bootstrap5 形式兼容。我想要一个简单的解决方案来覆盖现有的 form-group 类，因为它已固定为 col-sm-10，而无需编写全新的主题或编写大量 html 内容。

【解决方案2】：

您应该自定义表单元素的外观，如http://symfony.com/doc/current/cookbook/form/form_customization.html 此处所述

【讨论】：