如何让form表单外的按钮与表单内按钮对齐（Django+Bootstrap场景）

问题根因 #

HTML中<button>标签未指定type属性时，默认值为submit，放在<form>标签内部就会触发表单提交，这是你将取消按钮放在表单内点击会触发删除操作的核心原因。

最优解决方案 #

无需在<a>标签内嵌套<button>，Bootstrap支持直接给<a>标签添加btn系列类实现和原生按钮完全一致的样式，配合Bootstrap的布局工具类即可实现两个按钮并排对齐，完全不会触发表单提交。

Bootstrap 4/5 版本代码示例

<div class="container py-5">
   <form method="post">
      {% csrf_token %}
      <p>
         <h3>
            Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
         </h3>
      </p>
      <!-- d-flex实现并排，gap-2控制按钮间距 -->
      <div class="d-flex gap-2">
         <button class="btn btn-danger" type="submit" value="Confirm">Confirm</button>
         <a href="{% url 'entry-detail' entry.id %}" class="btn btn-secondary">Cancel</a>
      </div>
   </form>
</div>

Bootstrap 3 版本代码示例

如果你使用的是旧版Bootstrap 3，没有内置flex工具类，可以用浮动实现：

<div class="container py-5">
   <form method="post">
      {% csrf_token %}
      <p>
         <h3>
            Do you want to delete <em>"{{ entry.title }}"</em> posted on {{ entry.date_created|date:'Y-m-d' }}?
         </h3>
      </p>
      <div class="clearfix">
         <button class="btn btn-danger pull-left" style="margin-right:5px" type="submit" value="Confirm">Confirm</button>
         <a href="{% url 'entry-detail' entry.id %}" class="btn btn-secondary pull-left">Cancel</a>
      </div>
   </form>
</div>

内容的提问来源于stack exchange，提问作者Alex