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”类的实际Bootstrap布局在input中包含label元素，并为input使用左边距，以便正确呈现，以便您可能需要为此覆盖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 Docs中没有提及，这是史诗般的失败。

在标签之前放置复选框/无线电标签

3 个答案: