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

Question

我试图弄清楚如何用Bootstrap做下面的网格。

我不确定如何创建跨越两行的框（数字1）。这些框是按照编程顺序生成的。方框1是欢迎消息。

关于最佳方法的任何想法吗？

Answer 1

就像注释所建议的那样，解决方案是使用嵌套的跨度/行。<div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="span8">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">2</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">3</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">4</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">5</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">7</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="span4">8</div>&nbsp; &nbsp; </div></div>

Answer 2

我相信有关如何跨行的部分已经得到了彻底的解答（即通过嵌套行），但是我也遇到了嵌套行未填充其容器的问题。尽管可以选择使用flexbox和负边距，但更简单的解决方案是h-50在row包含的框2、3、4和5&nbsp;上使用预定义的类。注意：&nbsp;我正在使用Bootstrap-4，我只想分享，因为我遇到了同样的问题，发现这是一个更优雅的解决方案:)