如何让Bootstrap列跨越多行？
如何让Bootstrap列跨越多行？
提问于 2013-05-06 07:56:43
我正在尝试找出如何使用Bootstrap创建以下网格。
我不确定如何创建跨越两行的框(1号)。这些框是按照布局顺序以编程方式生成的。框1是欢迎消息。
有没有什么最好的方法呢？
回答 3
Stack Overflow用户
发布于 2013-05-06 08:59:57
正如评论所建议的，解决方案是使用嵌套的跨度/行。
<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>Stack Overflow用户
发布于 2019-10-25 04:44:54
<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>Stack Overflow用户
发布于 2013-05-06 08:56:45
下面的例子似乎起作用了。只需设置第一个元素的高度
<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>不过，我不禁认为这是对行的错误使用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16390370
复制相关文章
相似问题