twitter-bootstrap - Bootstrap 风格不适用于 Angular2 组件

Question

Bootstrap 样式不适用于 Angular2 组件。

在以下 angular2 组件中，在 ui 中不作为 Bootstrap 流体容器工作。如果我在带有 div 元素的组件中使用“container-fluid”，那么在工作中将会。

例如:(不工作)

@Component({
    selector: 'gn-app',
    viewProviders: [],
    moduleId: module.id,
    template:
        `<gn-layout class="container-fluid"
        (window:resize)="gnOnResize($event)"
        </gn-layout>
    `,
   directives: [ROUTER_DIRECTIVES, LayoutComponent]
})

工作代码

<gn-layout>
   <div class="container-fluid">
      <div class"row">
          <gn-container></gn-container>
      </div>
   </div>
</gn-layout>

Answer 1

那是因为浏览器无法将这些组件识别为 HTML 元素，因此它们不会对它们应用默认样式。您必须将 display:block 添加到组件，它才能正确呈现。

@Component({
    styles : [`
        :host {
            display: block;
        }
    `]
})

那行得通。你可以阅读这个issue正在讨论默认添加 display:block 的位置。

查看此 plnkr举个例子。要查看差异，请从组件中删除 styles 属性。