Bootstrap - 不适用于 Angular 子组件

Question

我在我的 Angular 项目上通过 CDN 使用 Bootstrap，Bootstrap 适用于父组件，但不适用于子组件宽度不会变为 col-12

父组件宽度变为 12，但是子组件宽度似乎变为最大内容，未应用 css 文件

           <link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
            crossorigin="anonymous"
           />
           <script
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"
            ></script> 


            //parent

           <div class="col-11 d-flex flex-row" id="section">
           <app-resume-section></app-resume-section>
           </div> 
       
           //child
           <div class="col-12 bg-secondary" id="resume-section">
           <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>





      



 

Answer 1

当使用角度组件来分割引导代码时，您需要注意，该组件可能在您提供的代码中没有预期的

width

和

height

，这将是

<app-resume-section></app-resume-section>

来解决这个问题，我们可以使用下面的 CSS 确保组件选择器始终采用父组件的宽度和高度，这可能会让您的代码正常工作

:host

css 选择器将为角度组件设置样式，并使其采用父元素的高度和宽度！

resume-section.component.css

:host {
    display: block;
    width: 100%;
    height: 100%;
}

/*

:host {
    display: flex;
    width: 100%;
    height: 100%;
}

*/