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浏览器窗口的大小时，无法正确看到屏幕

如何查看如何在Chrome中解决此问题？是我的template.html

Answer 1

之所以发生这种情况，是因为您使用的是col-xs-2-具有在每种视口尺寸上创建具有布局的效果。

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

>

要在不同的视口上获得不同的布局，您需要做的是为响应式布局提供大小的选择：例如：

所以可以说，您希望以下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 使其堆叠（如果您打算这样做）。