Question

我在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"

Answer 1

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

如果要将其设置为全局，只需创建一个例如form/bootstrapCols.html.twig的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添加到您需要的类的同一文件中。

Answer 2

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

中所述

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

2 个答案: