带有 colspan 之类的引导网格答案

【问题标题】：Bootstrap grid with something like colspan带有 colspan 之类的引导网格
【发布时间】：2014-05-05 06:58:16
【问题描述】：

如何使用 Twitter Bootstrap 创建此布局...

让它像这样堆叠起来......

我可以将布局作为表格进行（目前它是一个图像映射，但这是一个快速而肮脏的短期解决方案），但据我了解引导程序，表格不知道如何堆叠单元格。我已经看过许多提供类似“rowspan”的功能的 Bootstrap 演示，但在这种情况下，我需要一个类似“colspan”的功能。 Bootstrap 能做到吗？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

假设您想使用 Bootstrap 3.1.1，这样的东西应该可以工作。您可能需要添加一些调整，但它应该可以解决您的问题。基本上，您将子标题和内容块分别放在一列中，以便在较小的屏幕上粘在一起。

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            3
        </div>
        <div class="col-xs-10">
            <div class="row">
                <div class="col-sm-12">
                    Research complete
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div>Protocol and data</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>Study specific</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>Ethics/governance and regulatory</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle

【讨论】：