我正在使用Bootstrap制作一个包含5个画廊（部分）的模拟项目，每个画廊包含4个图像，共有20个模态。
我正在考虑将模式放在HTML中相应部分下的组中。在结构上，代码看起来像这样：
图库1
图像x 4
模态x 4
图库2
图像x 4
模态x 4
图库3
图像x 4
模态x 4
图库4
图像x 4
模态x 4
图库5
图像x 4
模态x 4
这符合Bootstrap的指导原则：
始终尝试将模式的HTML代码放在文档的顶层位置，以避免影响模态外观和/或功能的其他组件。
我理解顶级位置与DOM树有关，如本Stack Overflow conversation中所述。
我的代码组织是否正常或是否会出现潜在的冲突？
最好在关闭的身体标签上方阻挡20个模态吗？
我可以通过反复试验测试，但最佳做法是什么？