Bootstrap風格不適用於Angular2組件

Bootstrap風格不適用於Angular2組件。Bootstrap風格不適用於Angular2組件

在以下angular2組件中，不作爲ui中的引導流體容器工作。如果我使用div元素的組件內部的'容器流體'，將在作品中使用。

例：（不工作）

@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>

來源

2016-03-24 Natarajan Ganapathi

這是因爲瀏覽器不能識別這些組件的HTML元素，所以他們不把它們應用的默認樣式。您必須將display:block添加到組件，並且它將正確呈現。

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

這將工作。您可以閱讀issue這裏正在討論的地方默認添加display:block。

看到這個plnkr與一個例子工作。要查看差異，請從組件中刪除styles屬性。

來源

2016-03-24 01:19:59

是否需要所有組件？ –

@NatarajanGanapathi可悲的是它看起來像。我不知道有什麼辦法可以默認。你可以在你的css中使用'my-app * {display：block; ''但這可能會影響其他你不想影響的事情。 –

你..這是個好主意。謝謝@Eric Martinez。我用一些'xx-'前綴創建我自己的組件。所以我可以像'xx-app xx- * {display：block;}'或'xx- * {display：block; }'。這是不錯的方法嗎？ –

Bootstrap風格不適用於Angular2組件

回答

相關問題