如何制作 6x4 的响应式 html 网格答案

【问题标题】：How to make a responsive html grid 6x4如何制作 6x4 的响应式 html 网格
【发布时间】：2017-02-21 18:41:48
【问题描述】：

我需要制作一个响应式网格，该网格在使用小屏幕时不会丢失其网格数（甚至应该是 6x4），并且应该覆盖整个屏幕并且看起来类似于下图。

我在网上没有找到类似的东西，我不是UI专家，任何帮助将不胜感激，应该怎么做？引导网格还是表格？

我将使用此网格作为我们网站的叠加层来收听滑动操作。

【问题讨论】：

标签： css twitter-bootstrap grid responsive tabular

【解决方案1】：

您可以使用引导网格系统简单地做到这一点。

示例

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
           .col-xs-2 {
            border:3px solid grey;
            height: 50px;
           }
           </style>
           
           </head>
           <body>
           <div class="container-fluid">
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           <div class= "row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
</div>

           </div>
           </div>
           </body>
           </html>

【讨论】：

但这并没有延伸到视口，我想要一个全屏网格，有什么想法吗？
使用
检查更新的 sn-p
我试过了，它伸展到最大宽度，高度呢？
你需要使用css来得到想要的高度改变这部分代码高度：50px;