Angular 2组件和bootstrap css网格放置

Question

我正在使用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 {}

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

正如您所看到的那样，表格是从页面的开头呈现的，它位于侧边栏和标题下。我不确定它是否重要，但我计划在某处添加“切换导航栏”按钮。

编辑：我的问题是，为什么组件适合在一起？为什么表格位于标题和侧边栏下方？为什么引导网格系统不工作？

Answer 1

这似乎更像是一个CSS问题。

Bootstrap网格系统的工作方式类似于12，这意味着如果您在一个块中的页面上有两个元素，那么如果第一个元素是col-md-4，那么第二个元素应该是col-md-8以适合水平方向。

@Bootstrap grid system.

在您的情况下，可以在模板：

@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]
})

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

Answer 2

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

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