html.twig内のsingel html-tagにアクセスしてスタイルを設定する方法

Question

html.twig-file内でブートストラップを使用しようとしています。 状況： iはhtml.twig内でこのコード行があります。ここでは

{{ form_row(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, 
      )) 

内の "form.gender" の定義であるが、大きな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>

私のような任意のシンゲルのhtmlタグの利用ブートストラップ・クラスたいと思います：、ラベルを入力 しかし、私は唯一の1行があります。

{{ form_row(form.gender) }} 

がどのように私は（スタイリングのための）任意のシンゲルのhtmlタグにアクセスすることができますが、私は上記の行が1つしかないのですか？ Thx ありがとう

Answer 1

htmlコードが自動生成されている場合は、自動的に生成されるクラス/ ID名にcssを定義してみてください。

ブートストラップからCSSをコピーすることによって、自動生成クラス名/ ID cssを定義します。これは、特定のhtml要素のcssに対応します。

例：ブートストラップにクラス名フォームグループのプロパティをコピーして、自動生成されたdiv要素

のIDのCSS（ new_entry_gender ）を定義します。

これが機能する場合があります。

それとも

• にid
• することにより、その自動生成された項目を選択して別の方法としては、

のjQueryで.addClass（）を使用して、項目にブートストラップクラス名を追加するには、スクリプトを書く の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見てみることができ、個々の分野の高度なカスタマイズのために。

・ホープ、このヘルプ例えば :)