Bootstrap多行元素

Question

我正在爲一個網站設計並在此期間練習bootstrap，所以我對它很陌生。現在，我將網格劃分爲12列，然後將元素分層爲多行並按列跨距分隔。我的問題是，如何處理跨多個元素的元素，跨越多個元素旁邊的元素。

Desired Layout Example

現在，本實施例中的圖像上，我將如何完成的3×4和3×2和3x3塊的堆疊？此外，這些元素不應該垂直調整大小。

由於我對Bootstrap和一般響應式設計比較陌生，因此對其他框架和/或解決方法開放。

Answer 1

像這樣的事情，需要一個相當大量的嵌套容器來獲得你想要的效果，但這一切都是可能的。

一些元素的高度有點偏差，但一旦內容填滿，它應該看起來很好。

下面是一個工作示例

div { 
 
    border: 1px solid #000; 
 
    box-sizing: border-box; 
 
} 
 
div div { 
 
    border: 1px solid #444; 
 
} 
 
div div div { 
 
    border: 1px solid #888; 
 
} 
 
div div div div { 
 
    border: 1px solid #bbb; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    <div class="col-xs-1">1x1</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-3"> 
 
     <div class="row"> 
 
     3x2 
 
     </div> 
 
     <div class="row"> 
 
     3x3 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-9"> 
 
     <div class="row"> 
 
     <div class="col-xs-4"> 
 
      3x4 
 
     </div> 
 
     <div class="col-xs-8"> 
 
      <div class="row"> 
 
      <div class="col-xs-6"> 
 
       3x2 
 
      </div> 
 
      <div class="col-xs-6"> 
 
       3x2 
 
      </div> 
 
      <div class="col-xs-12"> 
 
       6 
 
      </div> 
 
      <div class="col-xs-12"> 
 
       6 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
      <div class="row"> 
 
      <div class="col-xs-4"> 
 
       <div class="row"> 
 
       <div class="col-xs-4"> 
 
        1 
 
       </div> 
 
       <div class="col-xs-4"> 
 
        1 
 
       </div> 
 
       <div class="col-xs-4"> 
 
        1 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-8"> 
 
       <div class="row"> 
 
       <div class="col-xs-2"> 
 
        1 
 
       </div> 
 
       <div class="col-xs-2"> 
 
        1 
 
       </div> 
 
       <div class="col-xs-2"> 
 
        1 
 
       </div> 
 
       <div class="col-xs-2"> 
 
        1 
 
       </div> 
 
       <div class="col-xs-2"> 
 
        1 
 
       </div> 
 
       <div class="col-xs-2"> 
 
        1 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

像下面這樣的東西。它不是完整的HTML，但它可以給你，以你如何使用水平和垂直引導電網（基本上都是通過嵌套）一個想法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div class='container'> 
 
    <div class='row'> 
 
    <div class='form-horizontal'> 
 
     <!--First Row--> 
 
     <div class='form-group'> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     <div class='col-md-1'></div> 
 
     </div> 
 
     <!--Second Row--> 
 
     <div class='form-group'> 
 
     <div class='col-md-3'> 
 
      <div class='form-group'></div> 
 
      <div class='form-group'></div> 
 
     </div> 
 
     <div class='col-md-3'> 
 
      <div class='form-group'></div> 
 
      <div class='form-group'></div> 
 
      <div class='form-group'></div> 
 
      <div class='form-group'></div> 
 
     </div> 
 
     <div class='col-md-6'> 
 
      <div class='form-group'> 
 
      <div class='col-md-6'> 
 
       <div class='form-group'></div> 
 
       <div class='form-group'></div> 
 
      </div> 
 
      <div class='col-md-6'> 
 
       <div class='form-group'></div> 
 
       <div class='form-group'></div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>