在标签之前放置 checkbox/radio 个标签

Question

我使用这个 Twig 代码来显示我的 Symfony 表单的复选框（或单选框）：

{% for o in my_form.magic_choices %}
    {{ form_row(o) }}
{% endfor %}

这会为每个选择生成以下输出：

<div>
    <label for="myform_magic_choices_0">Secret option</label>
    <input type="checkbox" value="secret_option" ...>
</div>

这会强制 checkbox 输入元素在其 label 视觉效果之后，我该如何解决这个问题以使我的选择列表更好？我需要 检查左侧 。

Answer 1

您可以简单地向左浮动输入。

Answer 2

而不是使用 form_row 渲染项目，像..

<div class="checkbox{% if o.vars.errors|length > 0 %} has-error{% endif %}">
    {{ form_widget(o) }} {{ form_label(o) }}
    {% if o.vars.errors|length > 0 %}
        <span class="help_block">{{ form_errors(o) }}</span>
    {% endif %}
</div>

使用 "checkbox" class 的实际 Bootstrap 布局在 label 内有 input 元素，并为 [= 使用 margin-left 14=] 以便正确呈现，因此您可能希望为此覆盖 CSS。

.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
    // margin-left: -20px;
    margin-left: 0;
}

或者

您可以将标签呈现为文本，以便它符合 Bootstrap 的想法，例如..

<div class="checkbox{% if o.vars.errors|length > 0 %} has-error{% endif %}">
    <label>
        {{ form_widget(o) }} {{ o.vars.label }}
    </label>
    {% if o.vars.errors|length > 0 %}
        <span class="help_block">{{ form_errors(o) }}</span>
    {% endif %}
</div>

Answer 3

树枝

{{ form_row(o, {'attr': {'class': 'checkboxy'}}) }}

css

checkboxy {
    float:left;
}

嗯，这在 Symfony 文档中没有提到，这是史诗般的失败。

在标签之前放置 checkbox/radio 个标签

Place checkbox/radio tags BEFORE labels

html

css

checkbox

symfony

twig