IntraWeb 16.0.2 + Bootstrap 4 居中布局实战（附源码+效果图）

前言

最近在优化一个 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 开发，强烈推荐试试这个方法！