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 {
}

容器中有多个dynamic-container-component。

@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

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

1 个答案: