Bootstrap stili, Angular2 bileşenleriyle çalışmaz

Question

Bootstrap stili, Angular2 bileşenlerine karşı çalışmıyor. Ui'de önyükleme sıvısı kabı olarak çalışmayan aşağıdaki açısal2 bileşende

. Eğer elemanın içinde 'konteyner-sıvı' kullanırsam, elemanın div öğesi ile çalışır.

Ör: (Çalışmıyor)

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

Çalışma Kod tarayıcılar HTML öğeleri olarak bu bileşenleri tanımaz, bu yüzden onlara varsayılan stilleri geçerli değildir, çünkü var

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

Answer 1

. Bileşene display:block eklemeniz ve doğru şekilde oluşturulabilmesi.

Bu işe yarayacaktır. Bu issue numarasını, varsayılan olarak display:block eklemek için nerede tartışılacağını okuyabilirsiniz.

Örnek bir çalışma ile bu plnkr'a bakın. Farkı görmek için, bileşenden styles özelliğini kaldırın.