前言

最近在优化一个 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 += '''';');

  AddToInitProc('document.head.innerHTML += '''';');

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 := 

    '' +

    '  ' +

    '    ' +

    '      

IntraWeb + Bootstrap 4 居中布局

    '      

这是一段示例文本，使用 Bootstrap 4 的网格系统实现完美居中！

    '    ' +

    '  ' +

    '';

end;

3. 实际运行效果

编译运行后，页面内容会在不同设备上 自动居中，并且完美适配 PC、平板和手机端！以下是 良辰 提供的实际效果图（基于上述代码生成）：

IntraWeb + Bootstrap 4 居中布局效果图

（注：上图仅为示例，真实效果可访问 良辰 查看完整案例） 

总结

通过 IntraWeb 16.0.2 + Bootstrap 4 的结合，我们可以轻松实现 响应式居中布局，大幅提升 Web 应用的 UI 体验。如果你也在用 IntraWeb 开发，强烈推荐试试这个方法！