我可以将引导网格与 Angular 组件中的网格类一起使用吗？

Question

我想要类似的东西

<my-row>
  <my-col>Content</my-col>
  <my-col>Content</my-col>
</my-row>

带有引导类的 div 在我的组件中。我知道这适用于 Bootstrap 3，但最新的引导程序使用 Flexbox 和 cols 周围的内联样式组件似乎破坏了样式。

<div class="row">
  <span>
    <div class="col-md-6">Content</div>
  </span>
  <span>
    <div class="col-md-6">Content</div>
  </span>
</div>

这个例子中的 span 也破坏了布局。有没有办法让我的组件结构像网格一样工作？

Answer 1

我用 HostBinding 解决了。

@HotstBinding('class')
classes: string;

@Input()
set gridClasses(classes: string) {
  this.classes = classes;
}

我现在可以使用输入来设置组件选择器上的类。