Question

我正在尝试在html.twig文件中使用bootstrap。情况：我在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-area：

<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>

我想将bootstrap-classes用于任何singel html-tag，例如：label，input 但我只有一行：

{{ form_row(form.gender) }}

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

Answer 1

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

通过从bootstrap复制css来定义自动生成的classname / id css，对应于该特定html元素的css。

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

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

这可能有效。

或者你也可以使用jQuery 将脚本编写为

按ID
使用Jquery

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。

希望这个帮助

如何在html.twig中访问和设置singel html-tag

2 个答案: