在Angular中使用Bootstrap实现两列并排显示的问题排查

你的代码存在两个关键问题：

1. 栅格类名版本不匹配：你使用的col-xs-6是Bootstrap 3的语法，Bootstrap 4及以上版本已经移除了xs前缀，超小屏幕（<576px）的列直接用col-6即可。
2. 栅格结构不规范：第二种写法缺少row容器，Bootstrap栅格必须遵循container → row → col的层级，row会抵消列的默认内边距，保证列能正确并排。

正确代码示例 #

<div class="container">
  <div class="row">
    <div class="col-6" style="background-color:red;">
      column 1
    </div>
    <div class="col-6" style="background-color:green;">
      column 2
    </div>
  </div>
</div>

额外检查项 #

• 确认项目已正确引入Bootstrap CSS：Angular项目可通过npm install bootstrap安装后，在angular.json的styles数组中添加"node_modules/bootstrap/dist/css/bootstrap.min.css"，或者在index.html中引入CDN链接。
• 若需针对不同屏幕尺寸设置列宽，可使用col-sm-6（≥576px）、col-md-6（≥768px）等类名，配合col-6实现响应式布局。

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