Angular表单自定义样式无法生效，求可行解决方案

问题分析 #

你遇到的问题核心是两点：Bootstrap样式未正确加载、布局代码和表格结构存在小错误，按以下步骤修改即可达到预期效果：

1. 正确引入Bootstrap样式 #

你使用了form-control、btn、col-md-*等Bootstrap专属类，需要先确保Bootstrap样式被正确引入Angular项目：

• 首先确保你已经通过npm安装了Bootstrap：终端执行npm i bootstrap
• 打开angular.json配置文件，找到 projects > 你的项目名称 > architect > build > options > styles 数组，添加Bootstrap样式路径：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

• 修改配置后需要重启ng serve服务才能生效。

2. 修正表格结构错误 #

你的表格表头只有2列，表体有3列（多了一个删除按钮列），导致列不对齐，修改home.component.html里的表格表头部分，新增操作列：

<thead>
  <tr>
    <th>Type</th>
    <th>Value</th>
    <th>操作</th>
  </tr>
</thead>

3. 调整布局样式实现居中对齐 #

你当前.box设置的固定左边距margin-left:400px在不同尺寸屏幕下表现不一致，修改home.component.css里的.box样式：

.box{
  width: 50%;
  border: 1px solid rgb(145, 138, 138);
  border-radius: 25px;
  padding: 0px 20px 20px 20px;
  /* 把固定左边距改成上下保留边距，左右自动居中 */
  margin: 5rem auto 0 auto;
}
/* 新增卡片内边距，避免内容贴边 */
.card {
  padding: 2rem;
}

4. 调整按钮对齐（可选） #

如果要让Reset按钮靠右对齐，可以给第二个按钮所在的div加text-end类（Bootstrap4用text-right）：

<div class="col-md-6 text-end">
  <button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
</div>

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