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

Roo*_*eyl 1 css symfony-forms symfony twitter-bootstrap

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

twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"
    form_themes:
            - bootstrap_3_horizontal_layout.html.twig
Run Code Online (Sandbox Code Playgroud)

我正在使用它来通过它的组件(标签和小部件)呈现表单。
所有标签都有一个宽度为 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>
Run Code Online (Sandbox Code Playgroud)

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

{{ form_label(form.name, 'gfdg', {'label_attr': {'class': 'col-md-3'} }) }}
Run Code Online (Sandbox Code Playgroud)

哪个渲染 class="col-xs-2 col-md-3"

Kok*_*ers 5

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

如果要全局设置,只需创建一个 twig 文件,例如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 %}
Run Code Online (Sandbox Code Playgroud)

这样你将覆盖bootstrap_3_horizo​​ntal_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']
Run Code Online (Sandbox Code Playgroud)

如果您只想更改col- 一个视图,那么只需在您的树枝视图文件中使用以下命令:

{% form_theme formname with ['bootstrap_3_horizontal_layout.html.twig', _self] %}
Run Code Online (Sandbox Code Playgroud)

并在同一个文件中添加块form_label_classform_group_class您需要的类。