引導網格布局

Question

我是Bootstrap Gridline系統的新手，因此在嘗試創建（高級？）Gridview時遇到了麻煩：

所以我的問題是我不知道如何按行組織塊，因為某些塊必須具有不同的高度，例如，塊5的高度應該與塊3和2的大小相同。

那有可能嗎？ 塊之間也應該有一些空間，因此背景圖片應填充這些空間。

請幫幫我。

Answer 1

您需要做的是將div 2、3和4放置在自己的容器div中（使用類.col-md-3），將5和6放置在另一個容器div（使用類.col-md-3中） ）。 使div 1具有.col-md-6類。

編輯：您應該使用媒體查詢在桌面上將其設置為固定高度，然后在移動時將其設置為靈活高度。

@media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}

Answer 2

我認為最有效的方法是只使用一行包含三列。 您的div可以堆疊在適當的列中，並且可以定義每個列的高度。 您可以在這里查看其運行情況： http : //jsfiddle.net/StSmith/Z9SpM/1/

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div id="box1">1</div>
    </div>
    <div class="col-lg-3">
      <div id="box2">2</div>
      <div id="box3">3</div>
      <div id="box4">4</div>
    </div>
    <div class="col-lg-3">
      <div id="box5">5</div>
      <div id="box6">6</div>
    </div>
</div>

Answer 3

一種簡單的方法是按照列出的順序聲明div，然后應用簡單的float: left 。 如果您手動定義每個div的高度，則它們應該都適合到位！

Answer 4

雷切爾的想法正確。 您實際上只需要將行嵌套到容器中，然后使用CSS來調整高度。