Css 如何使引导列跨越多行？

我正试图弄清楚如何使用引导程序执行以下网格

我不确定如何创建跨越两行的框（编号1）。长方体按其布局顺序以编程方式生成。方框1是欢迎信息

---

有什么好办法吗？

下面的例子似乎很有效。只需在第一个元素上设置高度

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

1
2
3
4
5
6
7
8

---

我忍不住想这是一个错误的行用法。

对于bootstrap3:

1.










2.
3.
4.
5.
6.
7.
8.

正如评论所建议的，解决方案是使用嵌套的跨距/行

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

1.
2.
3.
4.
5.
6.
7.
8.

我相信关于如何跨行的部分已经得到了彻底的回答（即通过嵌套行），但我也遇到了嵌套行未填充其容器的问题。虽然flexbox和负边距是一个选项，但更简单的解决方案是在包含框2、3、4和5的

行上使用预定义的
h-50
类

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


1.
2.
3.
4.
5.
6.
7.
8.
，您可以嵌套引导gridsystem。那么创建两行而不是三行，将这两行嵌套在第一行中？当框以编程方式生成时，这可能会有问题。不知道它是否会工作，但是将
向左拉
类添加到所有框中会工作吗？它不会使框1与2+4的高度相同，但是当你设置高度时，它应该允许它工作。海尔伍德，如果可以的话，把它作为一个答案，如果不能，我将粘贴我的代码。它起作用了。。。至少在铬上。需要在其他浏览器中测试它。@实际上，不需要向左拉。只需在第一个元素上设置一个高度就行了。如何使框4和框5随着框1的增长而填充行的高度？这是一个示例，但效果不太好，第一列的底边与其余部分略微不对齐。这是一个很好的答案，但如果框5也需要延伸到第3行，等等，该怎么办，动态？@Misha'el这很简单，只需按照他为方框1所做的，将其应用于方框3/5即可。应该有3列大小相等的列，外部的一列只包含一行，内部的一列包含两行。
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>