我需要一些帮助来创建一个基于网格的网站

Question

这是我想要的布局：

！

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

我一直在考虑引导程序，但我有跨越列和行的元素，我不知道如何对其进行编码并将所有内容保存在我为布局创建的6x4网格中。 / p>

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

关于我应该如何处理的任何想法？

Answer 1

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

这是一个粗略的模型，说明如何使用bootstrap实现你的设计

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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