文本标签未与布局中的表单框对齐

时间:2014-07-15 03:43:49

标签: symfony layout twig zurb-foundation

我一直在关注如何覆盖正在运行的Twig表单模板的Symfony2文档,但是有一个问题。字段的名称没有排列在表单框旁边。

我应该得到这个: enter image description here

但我的姓名和电子邮件标签没有对齐。我明白了:

enter image description here

有人能告诉我我做错了什么吗? (我复制了模板中的代码并用它包装了表单代码。)

重写的模板代码

{% block form_widget_simple %}
<div class="row collapse">
    <div class="large-2 columns">
        <label class="inline"></label>
    </div>
    <div class="large-10 columns">
        {% spaceless %}
            {% set type = type|default('text') %}
            <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
        {% endspaceless %}
    </div>
</div>
{% endblock form_widget_simple %}

{% block email_widget %}
<div class="row collapse">
    <div class="large-2 columns">
        <label class="inline"></label>
    </div>
    <div class="large-10 columns">
        {% spaceless %}
            {% set type = type|default('text') %}
            <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
        {% endspaceless %}
    </div>
</div>
{% endblock email_widget %}

{% block textarea_widget %}
    {% spaceless %}
        <textarea rows="12" {{ block('widget_attributes') }}>{{ value }}</textarea>
    {% endspaceless %}
{% endblock textarea_widget %}

原始Zurb Foundation模板代码 http://foundation.zurb.com/templates/contact.html

<form>
<div class="row collapse">
    <div class="large-2 columns">
        <label class="inline">Your Name</label>
     </div>

    <div class="large-10 columns">
        <input type="text" id="yourName" placeholder="Jane Smith">
    </div>
</div>

<div class="row collapse">
    <div class="large-2 columns">
        <label class="inline"> Your Email</label>
    </div>
    <div class="large-10 columns">
        <input type="text" id="yourEmail" placeholder="jane@smithco.com">
    </div>
</div>

<label>What's up?</label>
    <textarea rows="4"></textarea>
    <button type="submit" class="radius button">Submit</button>
</form>

1 个答案:

答案 0 :(得分:0)

感谢Michael Sivolobov的指导。希望这能帮助其他人解决同样的问题。覆盖了{_ 1}}中的form_row并包裹{{ form_label(form) }}

<div class>