twitter-bootstrap – 引导网格,如colspan

发布时间：2020-12-18 00:25:44 所属栏目：安全来源：网络整理

导读：如何使用Twitter Bootstrap创建此布局… 所以它像这样堆叠我可以做一个表的布局(目前它是一个图像映射,但这是一个快速而肮脏的短期解决方案),但是据了解bootstrap,该表将不知道如何堆叠单元格.我看到一些Bootstrap演示给了“rowspan”的功能,但在这种情况下

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

所以它像这样堆叠

我可以做一个表的布局(目前它是一个图像映射,但这是一个快速而肮脏的短期解决方案),但是据了解bootstrap,该表将不知道如何堆叠单元格.我看到一些Bootstrap演示给了“rowspan”的功能,但在这种情况下,我需要一个“colspan”的功能.可以Bootstrap这样做吗

解决方法

假设你想使用Bootstrap 3.1.1这样的东西应该可以工作.您可能需要添加一些调整,但它应该可以解决您的问题.基本上你把你的subheaders和你的内容块放在一个列,每一个,使棒在一起在较小的屏幕上.

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!