javascript - 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，我希望将网格系统应用到整个页面，这样我就可以将组件组合在一起。然而，这是当前页面的布局。

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

编辑:我的问题是，为什么组件装配在一起？为什么表格在标题和侧边栏下方？为什么 Bootstrap 网格系统不工作？

Answer 1

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

Bootstrap 网格系统的工作方式类似于计数 12，这意味着如果您在一个 block 中的页面上有两个元素，那么如果第一个元素是 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]
})

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