Javascript Angular 2组件和引导css网格放置

我使用angular 2创建了一个使用不同组件的页面。我的布局有点像这样：

@Component({
    selector: 'my-app',
    template: `
        <x-header></x-header>
        <div class="col-md-1">
            <x-sidebar></x-sidebar>
        </div>
        <div class="col-md-6">
            <x-table></x-table>
        </div>
    `,
    directives: [HeaderComponent, SidebarComponent, TableComponent]
})
export class AppComponent {}

@组件({
选择器：“我的应用程序”，
模板：`
`,
指令：[HeaderComponent、SidebarComponent、TableComponent]
})
导出类AppComponent{}

这是我从index.html加载的主要组件-其他组件包含与其部分相关的标记和css。我正在index.html中添加bootstrap.min.css，我希望网格系统应用于整个页面，这样我就可以将组件装配在一起。然而，这是当前页面的布局

如您所见，表格从页面开始呈现，它位于侧边栏和标题下。我不确定这是否重要，但我计划在某处添加一个“切换导航栏”按钮

---

编辑：我的问题是，为什么组件装配在一起？为什么表格在页眉和侧边栏下面？为什么引导网格系统不能工作？

这似乎更像是一个css问题

引导网格系统的工作原理类似于计数12，这意味着如果在一个块中的页面上有两个元素，那么如果第一个元素是

col-md-4

，那么第二个元素应该是

col-md-8

，以便水平放置

在您的情况下，可能会在模板上：

@Component({
    selector: 'my-app',
    template: `
        <x-header></x-header>
        <div class="col-md-3"><!-- change to col-md-3 -->
            <x-sidebar></x-sidebar>
        </div>
        <div class="col-md-9"><!-- change to col-md-9 -->
            <x-table></x-table>
        </div>
    `,
    directives: [HeaderComponent, SidebarComponent, TableComponent]
})

@组件({
选择器：“我的应用程序”，
模板：`
`,
指令：[HeaderComponent、SidebarComponent、TableComponent]
})

---

对于标题，您必须检查该元素是否处于静态位置。

这似乎更像是css问题

引导网格系统的工作原理类似于计数12，这意味着如果在一个块中的页面上有两个元素，那么如果第一个元素是

col-md-4

，那么第二个元素应该是

col-md-8

，以便水平放置

在您的情况下，可能会在模板上：

@Component({
    selector: 'my-app',
    template: `
        <x-header></x-header>
        <div class="col-md-3"><!-- change to col-md-3 -->
            <x-sidebar></x-sidebar>
        </div>
        <div class="col-md-9"><!-- change to col-md-9 -->
            <x-table></x-table>
        </div>
    `,
    directives: [HeaderComponent, SidebarComponent, TableComponent]
})

@组件({
选择器：“我的应用程序”，
模板：`
`,
指令：[HeaderComponent、SidebarComponent、TableComponent]
})

---

对于header，您必须检查该元素是否处于静态位置。

如果缺少类为“row”的父div，请将代码更改为：

@组成部分({
选择器：“我的应用程序”，
模板：`
`,
指令：[HeaderComponent、SidebarComponent、TableComponent]
})
导出类AppComponent{}

您缺少类为“row”的父div，请将代码更改为：

@组成部分({
选择器：“我的应用程序”，
模板：`
`,
指令：[HeaderComponent、SidebarComponent、TableComponent]
})
导出类AppComponent{}

忘了问问题。@Jai-ops。。很抱歉是的，但正如图片所示。。。为什么会这样？忘了问问题了。@Jai-ops。。很抱歉是的，但正如图片所示。。。为什么会发生这种情况？css似乎没有正确应用，我试图将所有标签包装在同一个div中，这样所有内容都占据了一列（可笑，但只是为了证明我的观点）。但什么也没发生。。。页面布局就像我没有div一样。角度改变了引导网格系统的工作方式吗？我不能说什么，但是angular2把设计搞砸了，我不这么认为。但是如果可能的话，演示会很棒。你能在这里创建这样的问题吗：我刚刚发现了这个问题。设计师为侧边栏编写了一些自定义css，使其处于强制位置，而表格正在处理它。我使用默认的引导库（我使用的是定制的）得到了不同的结果@Thanor这就是我在第一行提到的。很高兴你终于解决了。有点。。。现在我需要重写css。。。谢谢你帮我弄明白这一点：）css似乎没有正确应用，我试图将所有标签包装在同一个div中，因此所有内容都占据了一列（可笑，但只是为了证明我的观点）。但什么也没发生。。。页面布局就像我没有div一样。角度改变了引导网格系统的工作方式吗？我不能说什么，但是angular2把设计搞砸了，我不这么认为。但是如果可能的话，演示会很棒。你能在这里创建这样的问题吗：我刚刚发现了这个问题。设计师为侧边栏编写了一些自定义css，使其处于强制位置，而表格正在处理它。我使用默认的引导库（我使用的是定制的）得到了不同的结果@Thanor这就是我在第一行提到的。很高兴你终于解决了。有点。。。现在我需要重写css。。。谢谢你帮我解决这个问题：）