Angular 15中Bootstrap指定列宽网格失效问题求助

核心问题：错误的DOM结构 #

你的app-component.html里包含了<body>标签，这会破坏Bootstrap网格依赖的DOM层级结构，导致布局规则失效。Angular应用的根组件会被挂载到index.html的<body>内部的<app-root>元素中，组件模板里不需要再重复写<body>标签。

修复步骤 #

1. 移除组件模板中的<body>标签
   修改后的app-component.html代码：

   <div class="container">
     <div class="row">
       <div class="col-4">test</div>
       <div class="col-8">
         <form (ngSubmit)="retornaGuias()">
           <input
             type="text"
             class="form-control"
             placeholder="Year"
             id="inputAno"
             [(ngModel)]="ano"
             name="ano"
           />
         </form>
       </div>
     </div>
   </div>
   

2. 额外排查项（若修复后仍异常）

   • 确认Bootstrap依赖正确安装：执行npm install bootstrap@5（或适配的v4版本）确保依赖包存在
   • 检查angular.json样式路径：确认node_modules/bootstrap/dist/css/bootstrap.min.css文件实际存在，路径拼写无错误
   • 排查自定义样式冲突：检查styles.css中是否有覆盖Bootstrap网格的规则，比如给.row设置flex-direction: column，或给.col-*设置固定宽度/width: auto

验证 #

修改后重启Angular服务（ng serve），col-4和col-8会按预期的1/3、2/3宽度比例布局显示。

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