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>