Как получить доступ и стилизовать сингл html-тег в html.twig

Question

Я пытаюсь использовать начальную загрузку в html.twig-файл. Ситуация: у меня есть эта строка кода в html.twig:

{{ form_row(form.gender) }}

Вот определение "form.gender" в PHP

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

Я хотел бы использовать bootstrap-классы для любого html-тега, такого как: label, input Но у меня есть только одна строка:

{{ form_row(form.gender) }}

Как я могу получить доступ к любому отдельному html-тегу (для стиля), если у меня есть только одна строка выше? Спасибо

Answer 1

Если HTML-код генерируется автоматически, попробуйте определить css для имени класса / идентификатора, которое генерируется автоматически.

Определите автоматически сгенерированное имя класса / идентификатор css, скопировав css из начальной загрузки, соответствующую css для этого конкретного элемента html.

Например: определить CSS для ID (new_entry_gender) вашего автоматически сгенерированного элемента div

скопировав свойства формы имени группы-группы в boostrap.

Это может сработать.

Или же вы можете использовать jQuery.

• Выберите этот автоматически сгенерированный элемент по идентификатору
• Добавьте имя класса boostrap к элементу, используя.addClass() в Jquery

Answer 2

Во-первых, визуализируйте каждый раздел поля формы отдельно, например, используйте это:

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

Вместо

{{ form_row(form.gender) }}

Тогда вы можете просто использовать переменные формы:

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

Для расширенной настройки отдельного поля вы можете посмотреть документацию здесь.

Надеюсь это поможет