Стиль маржи не может работать в 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