如何让 Bootstrap 列跨越多行？

我试图找出如何使用 Bootstrap 做下面的网格。

我不确定如何创建跨越两行的框(数字1)。这些盒子是按照它们的排列顺序以编程方式生成的。方框1是一个欢迎信息。

enter image description here

有什么好办法吗？

184596 次浏览
小开

下面的例子看起来很有用，只是在第一个元素上设置了一个高度

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

我忍不住想，这是错误的使用一行。

小开
最佳答案

对于 Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>




<div class="row">
<div class="col-md-4">
<div class="well">1
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<div class="well">2</div>
</div>
<div class="col-md-6">
<div class="well">3</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">4</div>
</div>
<div class="col-md-6">
<div class="well">5</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">6</div>
</div>
<div class="col-md-4">
<div class="well">7</div>
</div>
<div class="col-md-4">
<div class="well">8</div>
</div>
</div>

对于 Bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row-fluid">
<div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
<div class="span8">
<div class="row-fluid">
<div class="span6"><div class="well">2</div></div>
<div class="span6"><div class="well">3</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">4</div></div>
<div class="span6"><div class="well">5</div></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="well">6</div>
</div>
<div class="span4">
<div class="well">7</div>
</div>
<div class="span4">
<div class="well">8</div>
</div>
</div>

请参阅 JSFiddle (Bootstrap 2) : http://jsfiddle.net/SxcqH/52/上的演示

小开

如注释所示，解决方案是使用嵌套的跨度/行。

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

我相信关于如何跨行的部分已经得到了充分的回答(例如通过嵌套行) ，但是我也遇到了嵌套行没有填充它们的容器的问题。虽然可以选择使用 Flexbox 和负边距，但更简单的解决方案是在包含方框2、3、4和5的 row上使用预定义的 h-50类。

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

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

提交答案