angular 2 bootstrap响应不起作用

Question

我使用Angular 2和bootstrap。我想用随后的设计做一个响应式布局。我使用浏览器chrome

我有以下template.html

<div class="col-xs-2" [ngClass]="getClassesByPosition(0)">
    The first product is {{getProductByPosition(0).name}}.
</div>
<div class="col-xs-2" [ngClass]="getClassesByPosition(1)">
    The second product is {{getProductByPosition(1).name}}
</div>
<div class="col-xs-8">
    <table class="table table-stripped table-bordered">
    <thead>
        <tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
    </thead>
    <tbody>
        <tr *ngFor="let product of getTodoProducts(); let i = index">
            <td>{{ i + 1 }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.price }}</td>
        </tr>
    </tbody>
</table>
</div>

当我调整屏幕大小时，响应式设计不起作用。这是屏幕。在Chrome中，当我调整镀铬窗口大小时，我看不到正确的屏幕

我怎样才能在chrome中解决此问题？我的template.html是对的

Answer 1

这是因为您正在使用col-xs-2 - 这具有创建每个视口大小所具有的布局的效果。

Bootstraps样式基于最小宽度 - 并且每列是其父容器宽度的8.33％，这意味着如果指定col-xs-2，那么您实际上是说16.66％的xs大小的视口和UP。

要在不同的视口上获得不同的布局，您需要做的是为响应式布局提供一系列尺寸：例如：

所以，假设您想要以下laoyut - 橙色和蓝色div在桌面上方位于较小的屏幕上，并且在移动屏幕上（col-xs-您希望垂直堆叠这两个div - 但在所有其他视口中 - 您想要将它们水平放置，只放在md和lg屏幕上 - 将它们放在桌子旁边。

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2" [ngClass]="getClassesByPosition(0)">.../div>

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2" [ngClass]="getClassesByPosition(1)">...</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-8">...</div>

另外 - 顺便说一句 - 你在表类中有一个拼写错误 - 它不是表格剥离 - 而是表格编码。

<table class="table table-striped table-bordered">

Answer 2

您正在使用col-xs-前缀。如果使用它，列不会在调整大小时叠加。使用col-md或col-sm使其叠加（如果这是你的意图）。