Bootstrap布局异常：Canvas与侧边栏无法同行排列求助

嘿，我刚碰到过几乎一模一样的问题！你说的这个情况，核心原因其实很简单——你只装了ng-bootstrap，但没引入Bootstrap的核心CSS样式。

ng-bootstrap只是Angular对Bootstrap组件的封装，它本身不带Bootstrap布局类（比如row、col这些）的样式定义。所以你写的row和col根本起不了作用，自然就会把两个div挤成上下排列了。

解决步骤： #

1. 安装Bootstrap核心CSS
   先通过npm安装Bootstrap：

   npm install bootstrap
   

   然后在你的Angular项目里引入样式，二选一就行：

   • 打开angular.json，找到build -> options -> styles数组，添加一行：

     "node_modules/bootstrap/dist/css/bootstrap.min.css"
     

   • 或者在全局样式文件（比如styles.scss）里导入：

     @import "~bootstrap/dist/css/bootstrap.min.css";
     

2. 顺便修正HTML结构的小问题
   你把<app-threejs>嵌套在<canvas>里是不对的——canvas是替换元素，内部的内容不会被渲染出来。应该把组件放在canvas外面（或者让组件内部自己生成canvas），比如调整成这样：

   <div class="row">
     <div class="col">
       <app-threejs [width]=400 [height]=350></app-threejs>
     </div>
     <div class="col-2" style="background: blueviolet; height: 621px;">test</div>
   </div>
   

做完这两步，Bootstrap的row和col布局就会正常工作，ThreeJS画布和紫色侧边栏就能像你期望的那样并排显示在同一行了。

内容的提问来源于stack exchange，提问作者Torben Van Assche