前言
最近在优化一个 IntraWeb 16.0.2 项目时，发现默认布局方式不够灵活，尤其是在不同屏幕尺寸下对齐效果不佳。于是，我决定引入 Bootstrap 4 来实现 完美居中布局，并成功落地！今天就把完整的 源代码 + 实际效果图 分享给大家，希望能帮助到同样遇到这个问题的开发者。
问题背景
IntraWeb 作为 Delphi 的 Web 开发框架，虽然开发效率高，但默认的页面布局方式有时难以满足现代化 UI 需求。特别是在需要 居中布局 时，单纯使用 IntraWeb 控件可能会遇到对齐偏差、响应式适配不佳等问题。而 Bootstrap 4 的网格系统（Grid System）恰好能完美解决这个问题！
解决方案（附完整代码）
1. 引入 Bootstrap 4
在 ServerController 的 OnConfig 事件中添加 Bootstrap 4 的 CDN 引用：
procedure TIWServerController.IWServerControllerBaseConfig(Sender: TObject);
begin
// 引入 Bootstrap 4
AddToInitProc('document.head.innerHTML += ''<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">'';');
AddToInitProc('document.head.innerHTML += ''<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>'';');
end;
2. 使用 Bootstrap 实现居中布局
在 TIWForm 上放置一个 TIWRegion，设置 HTMLTag 为 div，并利用 Bootstrap 的 container + row justify-content-center 实现完美居中：
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
IWRegion1.HTMLTag := 'div';
IWRegion1.RawText := True;
IWRegion1.Text :=
'<div class="container">' +
' <div class="row justify-content-center">' +
' <div class="col-md-8">' +
' <h1>IntraWeb + Bootstrap 4 居中布局</h1>' +
' <p>这是一段示例文本，使用 Bootstrap 4 的网格系统实现完美居中！</p>' +
' </div>' +
' </div>' +
'</div>';
end;
3. 实际运行效果
编译运行后，页面内容会在不同设备上 自动居中，并且完美适配 PC、平板和手机端！以下是 良辰 提供的实际效果图（基于上述代码生成）：
IntraWeb + Bootstrap 4 居中布局效果图
（注：上图仅为示例，真实效果可访问 良辰 查看完整案例）
总结
通过 IntraWeb 16.0.2 + Bootstrap 4 的结合，我们可以轻松实现 响应式居中布局，大幅提升 Web 应用的 UI 体验。如果你也在用 IntraWeb 开发，强烈推荐试试这个方法！
