无JS通过Jinja2 if-else触发Bootstrap模态框页面侧移问题求助

页面内容侧移是两个配置错误共同导致的：

• 资源版本冲突：你页面引入的样式是Bootstrap 5.2版本，但脚本引用的是Bootstrap 3.3.7版本，两个大版本的模态框逻辑、样式规则完全不兼容。3版本的脚本会自动给<body>标签加右侧内边距、修改页面滚动规则，直接把正常文档流里的内容挤偏。
• 渲染逻辑不匹配：你是通过Jinja2服务端判断直接渲染显示状态的模态框，没有走Bootstrap预设的JS触发模态框流程，框架默认给弹出模态框设计的「隐藏滚动条、补滚动条占位宽度」的规则，在静态渲染场景下会变成多余的偏移量。

根据你「不使用JavaScript实现模态框触发」的需求，按以下步骤调整即可：

• 清理冗余冲突的脚本：直接删掉页面里所有<script>标签（包括jQuery、Bootstrap3的JS引用），这些脚本和你用的5.2版本CSS不兼容，而且你不需要用JS控制模态框显隐，留着只会制造样式冲突。
• 覆盖默认偏移样式：在页面的自定义<style>块里加下面的规则，强制抵消Bootstrap默认给模态框场景加的body偏移：

body {
  padding-right: 0 !important;
  overflow-y: auto !important;
}

• 修正属性语法错误：模态框里的关闭按钮aria-label属性值漏加引号，会导致标签解析异常，把对应代码修改为：

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

如果你完全不使用JS，这个关闭按钮的点击隐藏效果会失效，可以把它替换成普通跳转链接，点击后回到无错误参数的注册页即可，参考写法：

<a href="/register" class="btn btn-lg btn-primary w-100 mx-0 mb-2">确认</a>

改完之后模态框会正常作为静态块显示在页面顶部，下方注册表单不会再出现侧移错位的问题。

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