如何在Symfony控制器生成的表单按钮中设置padding？

看起来你在给Symfony表单的Send按钮设置padding时遇到了样式不生效的情况，我来给你几个可行的解决方案：

方法1：直接在控制器的SubmitType中添加内联样式 #

最简单的方式就是在按钮的attr数组里直接加入style属性，样式会直接作用到按钮元素上，不容易被默认样式覆盖：

->add('send', SubmitType::class, [
    'attr'=>[
        'class' => 'btn btn-primary',
        'style' => 'padding: 8px 16px; margin-top: 10px;' // 自定义padding值，以及和输入框的间距
    ]
])

你可以根据需求调整padding的数值，margin-top是用来和上方的消息输入框拉开距离的，这个也可以按需修改。

方法2：添加自定义CSS类，通过外部样式表控制 #

如果你不想用内联样式，更推荐的方式是给按钮加一个自定义类，然后在项目的CSS文件里编写样式规则：

首先修改控制器里的SubmitType配置：

->add('send', SubmitType::class, [
    'attr'=>[
        'class' => 'btn btn-primary contact-form-submit' // 新增自定义类contact-form-submit
    ]
])

然后在你的项目CSS文件中添加：

.contact-form-submit {
    padding: 0.5rem 1.25rem; /* 自定义padding大小 */
    margin-top: 1rem; /* 和输入框的间距 */
}

注意要确保你的CSS文件已经正确引入到contactus.html.twig模板中，比如通过asset()函数引入：

<link rel="stylesheet" href="{{ asset('css/your-styles.css') }}">

方法3：在Twig模板中手动渲染按钮 #

如果上面的方法还是不生效，可能是表单默认渲染模板覆盖了你的设置，这时候可以在Twig里手动渲染按钮，完全控制它的样式：

{{ form_start(form) }}
    {{ form_row(form.name) }}
    {{ form_row(form.enterprise) }}
    {{ form_row(form.phone) }}
    {{ form_row(form.email) }}
    {{ form_row(form.subject) }}
    {{ form_row(form.message) }}
    
    <!-- 手动渲染提交按钮 -->
    <div class="form-group">
        <button type="submit" class="btn btn-primary" style="padding: 8px 16px; margin-top: 10px;">
            {{ form_label(form.send) }} {# 用form_label获取按钮默认文本，也可以直接写"Enviar" #}
        </button>
    </div>
{{ form_end(form) }}

排查小技巧 #

如果样式还是不生效，打开浏览器开发者工具（F12），选中按钮元素查看Styles面板，看看是不是有其他样式（比如Bootstrap的btn类默认样式）覆盖了你的设置。如果是，可以用更具体的CSS选择器，比如：

form .contact-form-submit {
    padding: 0.5rem 1.25rem !important; /* 不推荐频繁使用!important，但紧急情况可以临时解决 */
}

内容的提问来源于stack exchange，提问作者david.bandarra