如何使用引导css创建复杂的砌体布局

我正在尝试创建一个网页，它类似于一个特定的Power Point幻灯片：

我曾尝试使用这种方法，但没有取得多大成功：

<div class="container">

    <div id="grids">
        <div>
            <div class="row col-sm-12">
                <div class="graybox col-sm-12" id="1" style="min-height: 50px;"></div>

            </div>

            <div class="row col-sm-12">
            <div class="graybox col-sm-3" id="7" style="min-height: 120px;"></div>
                <div class="graybox col-sm-1" style="min-height: 58px;"></div>


                    <div class="graybox col-sm-1" id="9.0" style="min-height: 20px;"></div>
                    <div class="graybox col-sm-1" id="9.1" style="min-height: 20px;"></div>
                    <div class="graybox col-sm-3" id="9.2" style="min-height: 20px;"></div>
                    <div class="graybox col-sm-3" id="9.3" style="min-height: 120px;"></div>
            </div>
            <div class="row col-sm-12">
                <div class="graybox col-sm-1 col-sm-offset-3" id="12" style="min-height: 50px;"></div>
                <div class="row col-sm-12">
                    <div class="graybox col-sm-1" id="15" style="min-height: 50px;"></div>
                    <div class="graybox col-sm-1" id="16" style="min-height: 50px;"></div>
                    <div class="graybox col-sm-6" id="17" style="min-height: 50px;"></div>
                </div>
            </div>
        </div>

    </div>
</div>

---

有谁知道这种类型的布局在bootstrap或其他css应用程序中是否可行吗？

您所描述的完全可以在bootstrap中实现，但我认为您对构建bootstrap的基本框架有一些误解。您有一些细节与我们分享吗？比如，你是需要网页响应，还是需要特定高度的网页，还是需要手机、手机、桌面？页面是否与照片完全相似，或者您需要类似于powerpoint演示文稿的内容？它不需要响应。它将在桌面浏览器中运行。它需要与上面显示的精确布局相似。我想，我已经很接近了：