Стили начальной загрузки (строка и столбец) между компонентами

Question

Я использую Angular и Bootstrap, и у меня есть этот компонент, который выводит правильно:

<div class="container">
    <div class="row">
        <div class="col">
            <h2>Hello</h2>
        </div>
        <div class="col">
            <h2>Hello</h2>
        </div>
    </div>
</div>

Затем я создаю новый компонент, который содержит:

<div class="col">
    <h2>Hello</h2>
</div>

И я вставил в свой родительский компонент вот так:

<div class="container">
    <div class="row">
        <app-my-component></app-my-component>
        <app-my-component></app-my-component>
    </div>
</div>

И стили Bootstrap, похоже, не работают. Это похоже на то, что стиль col в app-my-component не знает row родительского компонента.

Как мне заставить эти стили работать должным образом?

Answer 1

Поместите только h2 в компонент.
Классы col работают, только если их прямым родителем является row.

Вы можете попробовать mast3rd3mon Совет:

удалите <div class="row"></div> из родительского компонента и поместите его в новый компонент