Symfony - EntityType渲染

Question

我有一个表单，其中包含一个类型为EntityType的字段，其名称如下所示：

每一个都放在另一个的底部，我想让它们像这样由2组显示：

任何人都知道如何用Symfony和Twig做到这一点？

编辑：

这是由该字段的twig引擎生成的html代码

 <form name="form" method="post">
    <button type="submit" name="rechercher" class="btn btn-success">Rechercher</button>
    <div id="form">
      <div class="form-group">
         <label class="control-label" for="form_motcle">Mot Clé</label>
         <input type="text" id="form_motcle" name="form[motcle]" class="form-control" />
      </div>
      <div class="form-group">
         <label class="control-label">Categories</label>
         <div id="form_categories">
            <div class="checkbox">                                                                     
               <label class="">
                  <input type="checkbox" id="form_categories_1" name="form[categories][]" value="1" /> Théatre (0)
               </label>
            </div>
            <div class="checkbox">                                                            
               <label class="">
                   <input type="checkbox" id="form_categories_2" name="form[categories][]" value="2" /> Cinema (0)
                </label>
            </div>
            <div class="checkbox">
               <label class="">
                  <input type="checkbox" id="form_categories_3" name="form[categories][]" value="3" /> Comédie (0)
               </label>
            </div>
            <div class="checkbox">                                                            
               <label class="">
                  <input type="checkbox" id="form_categories_4" name="form[categories][]" value="4" /> Spectacle (0)
               </label>
            </div>
         </div>
      </div>
   </div>
</form>

Answer 1

你可以用一点CSS来解决这个问题。有关flexbox的信息和用法，我始终建议this article。

此代码的作用基本如下：

1. 将#form_categories定义为某个容器。内部元素应从左到右放置（row），如果它们到达末尾，则应使用新行（wrap）。

2. 每个包含复选框（#form_categories > .checkbox）的div的宽度为50％，因此每个＆＃34; row＆＃34;将有2个div。

这种方法的优势在于您可以使用媒体查询并更改单个div的width: 100%;，使其拥有自己的行（例如，在移动显示屏上）。

＆＃13;
＆＃13;
#form_categories {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
#form_categories > .checkbox {
  width: 50%;
}
＆＃13;
         <div id="form_categories">
            <div class="checkbox">                                                                     
               <label class="">
                  <input type="checkbox" id="form_categories_1" name="form[categories][]" value="1" /> Théatre (0)
               </label>
            </div>
            <div class="checkbox">                                                            
               <label class="">
                   <input type="checkbox" id="form_categories_2" name="form[categories][]" value="2" /> Cinema (0)
                </label>
            </div>
            <div class="checkbox">
               <label class="">
                  <input type="checkbox" id="form_categories_3" name="form[categories][]" value="3" /> Comédie (0)
               </label>
            </div>
            <div class="checkbox">                                                            
               <label class="">
                  <input type="checkbox" id="form_categories_4" name="form[categories][]" value="4" /> Spectacle (0)
               </label>
            </div>
         </div>
＆＃13;
＆＃13;
＆＃13;