如何获得Bootstrap列以跨越多行？

Question

我试图弄清楚如何用Bootstrap做下面的网格。我不确定如何创建跨越两行的框（数字1）。这些框是按照编程顺序生成的。方框1是欢迎消息。关于最佳方法的任何想法吗？

Answer 1

就像注释所建议的那样，解决方案是使用嵌套的跨度/行。

<div class="container">

    <div class="row">

        <div class="span4">1</div>

        <div class="span8">

            <div class="row">

                <div class="span4">2</div>

                <div class="span4">3</div>

            </div>

            <div class="row">

                <div class="span4">4</div>

                <div class="span4">5</div>

            </div>

        </div>

    </div>

    <div class="row">

        <div class="span4">6</div>

        <div class="span4">7</div>

        <div class="span4">8</div>

    </div>

</div>

Answer 2

我相信有关如何跨行的部分已经得到了彻底的解答（即通过嵌套行），但是我也遇到了嵌套行未填充其容器的问题。尽管可以选择使用flexbox和负边距，但更简单的解决方案是h-50在row包含的框2、3、4和5 上使用预定义的类。

注意： 我正在使用Bootstrap-4，我只想分享，因为我遇到了同样的问题，发现这是一个更优雅的解决方案:)