Css 在引导数据库中按大小排列列

我使用angular2动态打印引导列div，如下所示

[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>

---

如何安排？谢谢。

发生这种情况的原因是因为您使用的序列

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

这不适合一行，这就是它不工作的原因

修复您的序列并向其添加

行

，输出如下示例：

[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]

---

希望这有帮助

嗯。为什么不按你想要的顺序打印呢？如果您没有分享您的问题（代码片段）的工作示例，我们无法提供太多帮助您是否将每个问题包装成一行。。。如前所述，我们需要看到您使用的代码它是动态的，在col-md-6中我显示主服务，在col-md-12中显示子服务，我必须在每个服务的col-md-12中显示子服务。您不能只在一行中添加这些列，它们需要每12项一行，就像在第-col6-col6-row、row-col12-row中一样，如果不能做到这一点，则需要将外行设置为flex容器，并将6列和12列项目分别设置为50%。100%flex basisEach组需要开始行和结束行标记…我自己更新，并且upvoted@Deathstorm当然，我知道col-md-6和col-md-12不能排成一行。您将从我的代码中了解到，更改序列并将它们包装成一行并不容易。