Ответ 1
Правильный способ сделать это - создать свою собственную тему формы. Здесь я не буду писать все, но для вас важно то, что:
{% block choice_widget_expanded %}
{% spaceless %}
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
Я удалил рендеринг меток из choice_widget_expanded, чтобы я мог установить флажок внутри тега метки, точно так же, как то, что у вас есть в вашем решении. Но вы можете в принципе делать все, что хотите, в своей форме. Вы также можете перезаписать radio_widget, если хотите.
Если вы внимательно посмотрите на div вокруг флажков, я дал ему класс "my-form-choices". Вы можете дать ему классы, которые вы хотите. Это может быть "col-lg-8", как и у вас, но для меня имеет смысл иметь общее имя класса, а затем использовать mixins в вашем файле меньше. Ваш меньше файлов будет выглядеть так:
@import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-choices {
.make-lg-column(8);
}
.my-form-row-label {
.make-lg-column(4);
}
Но это до вас. Вам не нужно это делать, если вы этого не хотите. Наконец, вы используете свою тему, запустив ветку для своей страницы следующим образом:
{% extends 'MyOwnBundle::layout.html.twig' %}
{% form_theme form 'MyOwnBundle:Component:formtype.html.twig' %}
И вы показываете строку просто так (поле, которое я использовал в моем тесте, - это доступность, твой образец):
{{ form_row(form.availability) }}
Я пробовал это (с Symfony 2.4), и он работает. Результат выглядит примерно так:
<div class="my-form-row">
<div class="my-form-row-label">
<label class="required">Availability</label>
</div>
<div class="my-form-choices" id="myown_website_contactmessage_availability">
<div class="checkbox">
<label for="myown_website_contactmessage_availability_0">
<input type="checkbox" value="morning" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_0">
Morning
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_1">
<input type="checkbox" value="afternoon" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_1">
Afternoon
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_2">
<input type="checkbox" value="evening" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_2">
Evening
</label>
</div>
</div>
</div>
Также обратите внимание, что у меня нет подстрок, как у вас в вашем решении. На самом деле, ваше решение выходит за рамки вопроса, который вы задавали в первую очередь.
EDIT: здесь решение для наличия нескольких столбцов
Чтобы иметь несколько столбцов, это быстрое решение. Во-первых, тема формы может быть примерно такой:
{% block choice_widget_expanded %}
{% spaceless %}
<div class="my-form-choices-container">
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="my-form-choice">
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
И тогда ваш файл меньше будет выглядеть так:
@import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-row-label {
.make-lg-column(4);
}
.my-form-choices-container {
.make-lg-column(8);
}
.my-form-choices {
.make-row();
}
.my-form-choice {
.make-md-column(6);
}
В этом решении вы меняете количество столбцов, изменяя размер столбцов. Ячейки должны аккуратно складываться. В этом случае лучше скомпилировать (я не буду объяснять это здесь). Я пробовал это решение, и он работает хорошо. Преимущество использования меньше в этом случае состоит в том, что вы можете использовать одну и ту же тему формы на нескольких страницах и изменять количество столбцов, просто имея другой "меньший" файл для каждой из ваших страниц.