css - 边距样式在 Angular 和 Bootstrap 中不起作用

Question

我在 angular5 和 bootstrap 中使用内联样式的边距。我的模板定义为

@Component({
    selector: "dynamic-container-component",
    template: `
        <div 
            style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;" class="col">
        </div>
    `
})
export default class DynamicContainerComponent {
}

一个容器中有多个动态容器组件。

@Component({
    selector: "container",
    template: `
        <div class="container">
          <div class="row">
            <dynamic-container-component></dynamic-container-component>
            <dynamic-container-component></dynamic-container-component>
          </div>
        </div>
    `
})
export default class Container{
}

它将生成如下所示的 HTML。

<div>
  <dynamic-container-component>
   <div style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;">
    </div>
  </dynamic-container-component>
  <dynamic-container-component>
   <div style="border: 1px solid; min-height: 10px; min-width: 10px; margin: 10px;">
    </div>
  </dynamic-container-component>
</div>

因此，边距样式无法在浏览器中正确呈现

Answer 1

问题是 .col 类，女巫有 100% 和崩溃的边距。我建议您在父组件 css 或子 css 中设置以下内容:

::ng-deep [class*="col"] {
   width:calc(100% - 20px) !important;  // twice the size of the 10px margin
}

Demo