Question

我使用angular2

动态打印bootstrap列divs如下

[col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12]

但实际网格显示为

[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]

我想安排像

这样的列

[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]

这是代码

            <div class="row">
                <span *ngFor="let serviceItem of dashboardServicesList">
                    <div class="col-md-6 {{serviceItem.service}}-service">
                        <div class="service">
                            <a *ngIf="serviceItem.categoryHashmap" (click)="showSegments($event,serviceItem.service)">
                                <span class="service-title">{{serviceItem.displayName}}</span>
                                <i class="fa {{serviceItem.chevron}}" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <div *ngIf="serviceItem.categoryHashmap" class="col-md-12 segments {{serviceItem.is_active}} {{serviceItem.service}}">
                        <ul class="segments-boxes">
                            <li *ngFor="let item of serviceItem.serviceSegments">
                                <a target="_blank" href="{{item.url}}">{{item.displayName}}</a>
                            </li>
                        </ul>
                    </div>
                </span>
             </div>

如何安排？谢谢。

Answer 1

之所以发生这种情况，是因为您正在使用的序列。

col-md-6 + col-md-12 = col-md-18

这不适合row，这就是为什么它不起作用。

修正序列并向其添加row，输出如下：

[row][col-md-6][col-md-6][row][row][col-md-12][row][row][col-md-12][row][row][col-md-6][col-md-6][row][row][col-md-12][row]

希望这有帮助！

在bootstrap中将列排列为大小

1 个答案: