Bootstrap模态框内form标签自动闭合 无法包裹内部内容问题求助

问题原因 #

• 核心问题：你将模态框的HTML代码直接放在了<tbody>标签内部，与<tr>标签平级。根据HTML规范，<tbody>的直接子元素仅允许为<tr>标签，浏览器检测到非法嵌套的<div>（模态框元素）时，会自动修正DOM结构，将模态框整体移动到<table>标签外部，这个DOM自动重构的过程破坏了原有form标签的嵌套关系，导致form被提前闭合，内部内容被移出。
• 次要问题：你错误给<form>标签添加了form-control类，该类是专为输入框、选择框等表单控件设计的，不可用于form容器本身，也可能引发样式或结构解析异常。

修复方案 #

1. 将所有模态框代码从<tbody>内部移出，放置到<body>标签末尾、或者<table>外部的其他合法位置，保证模态框不会嵌套在表格相关标签内。
2. 移除<form>标签上的form-control类，若需要给表单加样式可使用自定义类或Bootstrap的card、p-3等布局类。
3. 补充表单内输入框的name属性，否则表单提交时后端无法正常接收对应参数。

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