我需要一些帮助来创建一个基于网格的网站 [关闭]答案

【问题标题】：I need some help creating a grid based website [closed]我需要一些帮助来创建一个基于网格的网站 [关闭]
【发布时间】：2015-03-08 22:31:00
【问题描述】：

这是我想要的布局：

我在将其转换为代码时遇到了一些问题。

我一直在考虑引导程序，但我有跨列和行的元素，我只是不确定如何对其进行编码并将所有内容保留在我为布局创建的 6x4 网格中。

这方面的另一个问题是响应能力。当视口变短时，网格中的框应该堆叠。但是，当元素使用不同数量的列时，这也会产生问题。

关于我应该如何处理这个问题的任何想法？

【问题讨论】：

您需要更具体地说明您希望如何在窄屏幕上堆叠网格项目。 Bootstrap 还允许对窄的定义越来越小。

标签： css twitter-bootstrap grid

【解决方案1】：

我建议阅读bootstrap grid 的工作原理以及如何在行中嵌套行。

这是一个粗略的模型，说明如何使用引导程序实现设计

.mygrid {
  text-align: center;
}
.mygrid div {
  border: 1px solid grey;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="mygrid">

    <!-- Top Half -->
    <div class="row">
      <div class="col-sm-2">
        <div class="row">1</div>
        <div class="row">2</div>
      </div>  
      <div class="col-sm-4">
        3<br/>
        3.5
      </div> 
      <div class="col-sm-2">
        <div class="row">4</div>
        <div class="row">5</div>
      </div>  
      <div class="col-sm-2">
        <div class="row">6</div>
        <div class="row">7</div>
      </div>  
      <div class="col-sm-2">
        <div class="row">8</div>
        <div class="row">9</div>
      </div>  
    </div>
    
    <!-- Bottom Half -->
    <div class="row">
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-8">10</div>
          <div class="col-sm-4">11</div>
        </div>
        <div class="row">
          <div class="col-sm-4">12</div>
          <div class="col-sm-8">13</div>            
        </div>
      </div>  
      <div class="col-sm-4">
        14<br/>
        14.5
      </div> 
      <div class="col-sm-2">
        <div class="row">15</div>
        <div class="row">16</div>
      </div> 

    </div>

  </div>
</div>

我添加了.mygrid 类只是为了帮助在网格上设置一些样式，但这不是必需的。

【讨论】：