Angular7项目升级Bootstrap至4.3后原有类样式不生效问题求助

故障原因 #

Bootstrap 4 采用 Flex 布局实现栅格系统，要求 .row 的直接子元素必须是带 .col-* 类的节点，才能触发栅格排列规则。你现有代码中 .row 的直接子节点是 Angular 自定义组件 <app-select>，.col-lg-4 定义在 <app-select> 的内部子节点上，无法被 Bootstrap 4 的栅格样式识别，因此三个区块无法横向并排，只能纵向堆叠。

解决方案 #

方案1：将 .col-* 类直接加在 <app-select> 节点上 #

修改后代码如下：

<div class="container">
    <div class="row">
         <app-select class="col-lg-4">
             <div class="bg-info">div one </div>
         </app-select>
         <app-select class="col-lg-4">
             <div class="bg-success">div two</div>
         </app-select>
         <app-select class="col-lg-4">
             <div class="bg-primary">div three</div>
         </app-select>         
    </div>
</div>

如果自定义组件加class后布局异常，可在 <app-select> 组件的样式中添加 :host { display: block; } 保证布局正常。

方案2：将栅格类迁移到 <app-select> 组件的根元素 #

如果需要组件内部控制栅格宽度，可直接把 col-lg-4 写在 <app-select> 组件的根节点上，父级 .row 即可正常识别栅格规则。

问题现象 #

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