Bootstrap 3網格行跨度

Question

我正在嘗試僅基於引導程序制作一個網格，我需要1 div才能跨越3行。 我在下面添加了一張圖片，包括我使用的代碼。 對於主電網，我使用了發電機，但是現在我陷入了困境。

表示移除的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，我在最終結果中如何使用它。 希望到目前為止對大家有所幫助。 非常感謝！

在此處輸入圖片說明

Answer 1

您必須將另一行嵌套才能實現目標。

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

Answer 2

我可能會誤解了您要做什么，但我認為您可能必須嵌套一些元素才能獲得所需的行跨度效果。

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

Answer 3

您需要將這些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>