Bootstrap 4 列显示为行问题：无法实现Bootstrap 3式三列布局

问题场景 #

我尝试在Angular 5项目中实现和Bootstrap 3一致的三列布局，但在使用Bootstrap 4时，预期的三列效果没有出现，反而所有列元素堆叠成了三行。我的屏幕宽度超过1200px，理论上应该触发Bootstrap的大屏栅格规则。

问题原因与解决方案 #

经过检查，发现问题的核心原因是：没有在Angular项目中引入Bootstrap的CSS文件。

Bootstrap的栅格系统完全依赖其内置的CSS样式来实现列的浮动、宽度分配等逻辑，尤其是Bootstrap 4相对于Bootstrap 3在栅格类的实现上有不少调整。如果缺少了核心CSS文件，栅格类（比如col-*系列）根本无法生效，元素会默认以块级元素的形式垂直堆叠，自然就变成了三行。

你可以通过以下两种常见方式在Angular 5中引入Bootstrap CSS：

• npm本地引入：如果已经通过npm安装了Bootstrap，打开angular.json（旧版本Angular CLI对应的是.angular-cli.json），在styles数组中添加Bootstrap CSS的路径：

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

• CDN在线引入：直接在项目的index.html文件中添加<link>标签，引入官方提供的Bootstrap 4 CSS文件即可。

引入CSS文件后，再使用Bootstrap 4的栅格类（比如针对大屏的col-xl-4，这样在宽度≥1200px的屏幕上就能平分三列），就能正常实现预期的三列布局了。

内容的提问来源于stack exchange，提问作者José Carlos