Question

如果我的角组件“ sidebar”中带有bootstrap col，则网格会破裂。

我的app.component.html

<div id="wrapper" style="padding-top: 80px;">
    <app-header></app-header>
    <app-searchrow></app-searchrow>
    <div class="main-container">
        <div class="container">
            <div class="row">
                <app-sidebar></app-sidebar>
                <div class="col-md-9">Content</div>
            </div>
        </div>
    </div>
    <app-footer></app-footer>
</div>

我的sidebar.component.html

<div class="col-md-3 sidebar">Sidebar Content</div>

但是如果我使用以下命令，它将起作用：

我的app.component.html

<div id="wrapper" style="padding-top: 80px;">
    <app-header></app-header>
    <app-searchrow></app-searchrow>
    <div class="main-container">
        <div class="container">
            <div class="row">
                <div class="col-md-3 sidebar">
                    <app-sidebarfilter></app-sidebarfilter>
                </div>
                <div class="col-md-9">Content</div>
            </div>
        </div>
    </div>
    <app-footer></app-footer>
</div>

我的sidebar.component.html

<p>sidebar content</p>

正在发生的事情，在许多情况下，将col包含在组件中将是有益的。但是为什么它不能像我期望的那样工作呢？我不记得他上一两年前与我一起工作时的情况。

使用：引导程序4 角度7.0

Answer 1

使侧边栏组件变为这样，.row内的第一级必须为col-SOMETHING

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="wrapper" style="padding-top: 80px;">
    <app-header></app-header>
    <app-searchrow></app-searchrow>
    <div class="main-container">
        <div class="container">
            <div class="row">
                <div app-sidebarfilter class="col-xs-3">sidebar</div>
                <div class="col-xs-9">Content</div>
            </div>
        </div>
    </div>
    <app-footer></app-footer>
</div>

Answer 2

您可以将类添加到组件标签中，例如

Answer 3

您可以使用显示：内容

<app-sidebarfilter style="display: contents;">

Bootstrap 4 col在Angular Component中不起作用

3 个答案: