如何在 html.twig 中访问和设置单个 html-tag 的样式

Question

我正在尝试在 html.twig 文件中使用引导程序。 情况： 我在 html.twig 中有这个代码行：

{{ form_row(form.gender) }}

这是 php 中“form.gender”的定义

 ->add('gender', ChoiceType::class, array(
                'choices' => array(
                    'form.register.children.gender.choice.male' => 'm',
                    'form.register.children.gender.choice.female' => 'f'
                ),
                'multiple' => true,
                'expanded' => true,
            ))

从此代码行将生成大 html 区域：

<div>
  <label class="required">Gender:</label>
  <div id="new_entry_gender">
    <input id="new_entry_gender_0"                
           name="catalog_new_entry[gender][]"      
           value="m" 
           type="checkbox">
    <label for="catalog_new_entry_gender_0">Male</label>


    <input id="new_entry_gender_1" 
           name="catalog_new_entry[gender][]"     
           value="f" 
           type="checkbox">
    <label for="catalog_new_entry_gender_1">Female</label>
  </div>
</div>

我想对任何单一的 html 标记使用引导类，例如：标签、输入 但我只有一行：

{{ form_row(form.gender) }}

当我上面只有一行时，我如何访问任何单个 html 标记（用于样式）？ 谢谢 谢谢

Answer 1

如果 html 代码是自动生成的，请尝试为自动生成的类/id 名称定义 css。

通过从引导程序复制 css 来定义自动生成的类名/id css，对应于该特定 html 元素的 css。

例如：为您自动生成的 div 元素 的 id (new_entry_gender) 定义 css

通过在 boostrap 中复制类名 form-group 的属性。

这可能有效。

或者你也可以使用 jQuery 把你的脚本写成

• 按 id 选择自动生成的项目
• 在 Jquery 中使用 .addClass() 将 boostrap 类名称添加到项目中

Answer 2

首先，渲染每个表单field section individually，例如，使用这个：

<div>
    {{ form_label(form.gender) }}
    {{ form_errors(form.gender) }}
    {{ form_widget(form.gender) }}
</div>

代替

{{ form_row(form.gender) }}

那么你可以简单地使用Form Variables:

{# render a widget, but add a "foo" class to it #}
{{ form_widget(form.gender, { 'attr': {'class': 'foo'} }) }}

对于单个字段的高级自定义，您可以查看doc here。

希望有帮助