在引导程序中按大小排列列答案

【问题标题】：Arrange columns as size in bootstrap在引导程序中按大小排列列
【发布时间】：2017-06-13 19:46:39
【问题描述】：

我正在使用 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>

如何安排？谢谢。

【问题讨论】：

好吧。为什么不按您想要的顺序打印它们？如果您不分享您的问题的工作示例 (sn-p)，我们将无能为力
你可能把每一个都包装成一行吗？ ...正如所指出的，我们需要查看您使用的代码
它是动态的，在 col-md-6 中我显示主要服务，在 col-md-12 中显示子服务，我必须在每个 col-md-12 中显示子服务服务。
您不能只将这些列添加到一行中，它们需要每 12 个项目一行，如 row - col6 - col6 - row、row - col12 - row 等等跨度>
另外，如果你不能这样做，你需要让外行成为一个弹性容器，并设置 6 和 12 列。项目分别为 50%。 100% 弹性基础

标签： css angular twitter-bootstrap-3

【解决方案1】：

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

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

这不适用于row，这就是它不起作用的原因。

修复你的序列并添加row's，输出如下示例：

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

希望这会有所帮助！

【讨论】：

每个组都需要开始和结束行标签...我自己更新它，并赞成
@Deathstorm，我当然知道 col-md-6 和 col-md-12 不能排成一行。而且你会从我的代码中了解到，改变顺序并将它们包装成行并不容易。