组件之间的引导样式（行和列）

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样式似乎不起作用。就像app-my-component中的col样式不知道父组件的row。

如何使这些样式正常工作？

Answer 1

仅将h2放入组件中。
col类仅在其直接父级为row时有效。

您可以尝试 mast3rd3mon 的提示：

  

从父组件中删除<div class="row"></div>并将其放入新组件中