Angular子组件中Bootstrap样式失效问题求助

问题原因 #

Bootstrap的网格系统**必须遵循.row包裹.col-***的层级结构，只有在.row容器内，col-*类的flex布局、宽度计算等样式才会被正确触发。你的代码存在两个不符合规范的问题：

• 父组件的col-11没有被.row包裹，虽然父组件样式看似生效，但属于偶然情况，破坏了网格层级逻辑
• 子组件的col-12直接作为父组件col-11的子元素，缺少上层.row容器，导致col-12无法继承网格布局规则，宽度默认变为max-content

修复步骤 #

1. 给父组件的网格容器补充.row层级
2. 子组件内部的col-*元素同样需要放在.row中

修改后的代码示例 #

父组件代码：

<!-- 补充row容器包裹col-11 -->
<div class="row">
  <div class="col-11 d-flex flex-row" id="section">
    <app-resume-section></app-resume-section>
  </div>
</div>

子组件代码：

<!-- 给col-12添加row父容器 -->
<div class="row">
  <div class="col-12 bg-secondary" id="resume-section">
    <div class="row"> <!-- 内部col同样需要row包裹 -->
      <div class="col-12 pt-4 d-flex flex-row flex-wrap gap-1">
        <button type="button" class="btn btn-primary col-12 col-xxl-4 col-md-4">NEW RESUME</button>
      </div>
    </div>
  </div>
</div>

简化写法（可选） #

如果父组件需要保持d-flex flex-row布局，可直接给父容器添加.row类（.row本身就是flex布局）：

<div class="row col-11" id="section">
  <app-resume-section></app-resume-section>
</div>

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