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

Question

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

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

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

Answer 1

您可以简单地使用 bootstrap 网格系统来完成。

例子

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

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

How to make a responsive html grid 6x4

css

grid

tabular

twitter-bootstrap

responsive