Bootstrap 3网格行跨度

Posted 2023-03-06

【中文标题】Bootstrap 3网格行跨度

【英文标题】：Bootstrap 3 grid row span

【发布时间】：2016-10-27 06:13:58

【问题描述】：

我正在尝试基于引导程序创建一个网格，我只需要 1 个 div 来跨越 3 行。 我在下面添加了一张图片，包括我使用的代码。对于主电网，我使用了发电机，但现在我卡住了。

显示 REMOVE 的 div 我添加为虚拟对象，需要删除。只有当我这样做时，具有 MOST READ 的 div 才会向右移动并缩小差距。 我想要实现的是 COMMENTS - SITE FEED 将跨越 3 行（垂直向下），旁边是聚光灯、测验/民意调查和大多数阅读。

我怎样才能通过包装一些东西来做到这一点，使其不再移动和移动:-)

<div class="container">
<div class="row">
    <div class="col-md-12">col-md-12 - MARQUE</div>
</div>
<div class="row">
    <div class="col-md-8">col-md-8 - CAROUSEL</div>
    <div class="col-md-4">col-md-4 - MY STUFF</div>
</div>
<div class="row">
    <div class="col-md-12">col-md-12 - 5 ARTICLES</div>
</div>
<div class="row">
    <div class="col-md-6">col-md-6 - LOCAL NEWS</div>
    <div class="col-md-6">col-md-6 - SEGMENTS NEWS</div>
    <div class="col-md-6">col-md-6 - COUNTRY NEWS</div>
    <div class="col-md-6">col-md-6 - TWITTER</div>
</div>
<div class="row">
    <div class="col-md-3">col-md-3 - BLOG</div>
    <div class="col-md-3">col-md-3 - IN SPOT LIGHT</div>   
    <div class="col-md-6">col-md-6 - - COMMENTS - SITE FEED</div>  
    <div class="col-md-3">col-md-3 - STEEL FABRIC</div>
    <div class="col-md-3">col-md-3 - QUIZ/POLL</div>
    <div class="col-md-6">col-md-6 - remove !!!!</div>
    <div class="col-md-6">col-md-6 - MOST READ</div> 
</div>
<div class="row">
    <div class="col-md-3">col-md-3 - UNDETER 1</div>
    <div class="col-md-3">col-md-3 - UNDETER 2</div>
    <div class="col-md-3">col-md-3 - UNDETER 3</div>
    <div class="col-md-3">col-md-3 - SHAREHOLDER</div>
</div>
<div class="row">
    <div class="col-md-12">col-md-12 - QUICK ACCESS</div>
</div>

我还没有尝试过建议的代码，但我很快就会尝试。我注意到我毕竟不是那么清楚，所以我拍了第二张照片。红色块代表 COMMENTS SITE FEED div 我在最终结果中如何需要它。希望它对到目前为止有点帮助。真的很感激！

enter image description here

【参考方案1】：

我可能误解了您到底想要什么，但我认为您可能必须嵌套一些元素才能获得所需的行跨度效果。

<div class="row">
    <div class="col-md-6">COMMENTS - SITE FEED</div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">STEEL FABRIC</div>
        </div>
        <div class="row">
            <div class="col-md-12">QUIZ/POLL</div>
        </div>
        <div class="row">
            <div class="col-md-12">MOST READ</div>
        </div>
    </div> 
</div>

【参考方案2】：

您需要将这些 div 分成两列。

以下应该实现所需的网格布局：

<div class="row">
    <div class="col-md-6">
        <div class="col-md-6">col-md-6 - BLOG</div>
        <div class="col-md-6">col-md-6 - IN SPOT LIGHT</div>
        <div class="col-md-6">col-md-6 - STEEL FABRIC</div>
        <div class="col-md-6">col-md-6 - QUIZ/POLL</div>
        <div class="col-md-12">col-md-12 - MOST READ</div>
    </div>
    <div class="col-md-6">
        col-md-6 - - COMMENTS - SITE FEED
    </div>
</div>

【参考方案3】：

您必须将行嵌套在另一行中才能实现目标。

html：

<div class="container">
  <div class="row">
    <div class="col-md-12 red col">col-md-12 - MARQUE</div>
  </div>
  <div class="row">
    <div class="col-md-8 blue col">col-md-8 - CAROUSEL</div>
    <div class="col-md-4 green col">col-md-4 - MY STUFF</div>
  </div>
  <div class="row">
    <div class="col-md-12 orange col">col-md-12 - 5 ARTICLES</div>
  </div>
  <div class="row">
    <div class="col-md-6 blue col">col-md-6 - LOCAL NEWS</div>
    <div class="col-md-6 green col">col-md-6 - SEGMENTS NEWS</div>
  </div>
  <div class="row">
    <div class="col-md-6 green col">col-md-6 - COUNTRY NEWS</div>
    <div class="col-md-6 blue col">col-md-6 - TWITTER</div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-6 orange col">col-md-3 - BLOG</div>
        <div class="col-md-6 blue col">col-md-3 - IN SPOT LIGHT</div>
      </div>
      <div class="row">
        <div class="col-md-6 green col">col-md-3 - STEEL FABRIC</div>
        <div class="col-md-6 orange col">col-md-3 - QUIZ/POLL</div>
      </div>
      <div class="row">
        <div class="col-md-12 red col">col-md-6 - MOST READ</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-12 green comments-site-feed">
          col-md-6 - - COMMENTS - SITE FEED
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 green col">col-md-3 - UNDETER 1</div>
    <div class="col-md-3 blue col">col-md-3 - UNDETER 2</div>
    <div class="col-md-3 orange col">col-md-3 - UNDETER 3</div>
    <div class="col-md-3 green col">col-md-3 - SHAREHOLDER</div>
  </div>
  <div class="row">
    <div class="col-md-12 red col">c`ol-md-12 - QUICK ACCESS</div>
  </div>
</div>

CSS：

.col 
  background: #ccc;
  height: 125px;

.row > .red 
  background: red;
  color: #fff;

.row .blue 
  background: blue;
  color: #fff;

.row .green 
  background: green;

.row .orange 
  background: orange;

.row > .comments-site-feed 
  background: black;
  color: #fff;
  height: 375px;

CODEPEN