用于响应web设计的动态列计数网格
用于响应web设计的动态列计数网格
提问于 2016-01-13 22:27:49
我正在寻找一个库，它允许我根据浏览器窗口大小创建一个具有最佳列数的动态网格。
因此，下面的网格
+-----------+-----------+-----------+-----------+
| 1 | 2 | 3 | 4 |
+-----------+-----------+-----------+-----------+
| 5 | 6 | 7 | 8 |
+-----------+-----------+-----------+-----------+当窗口变小时，应该像这样调整大小和重新排序。
+-----------+-----------+-----------+
| 1 | 2 | 3 |
+-----------+-----------+-----------+
| 4 | 5 | 6 |
+-----------+-----------+-----------+
| 7 | 8 | |
+-----------+-----------+-----------+有谁知道这样的东西是如何为响应性的网页设计所实现的吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-13 23:03:39
您熟悉引导网格系统吗？https://getbootstrap.com/examples/grid/
从这里获得一个引导CDN的链接(https://www.bootstrapcdn.com/)，并链接到您的html并尝试如下：
.html
<div class="container">
<div class="col-md-3 col-sm-4 square">1</div>
<div class="col-md-3 col-sm-4 square">2</div>
<div class="col-md-3 col-sm-4 square">3</div>
<div class="col-md-3 col-sm-4 square">4</div>
<div class="col-md-3 col-sm-4 square">5</div>
<div class="col-md-3 col-sm-4 square">6</div>
<div class="col-md-3 col-sm-4 square">7</div>
<div class="col-md-3 col-sm-4 square">8</div>
</div>.css
.square {
border:solid;
border-color: WHATEVERCOLOR;
width: 200px;
height: 200px;
}如果您想知道“.col”或“class”的类修复是什么，请检查本页中的“网格选项”段落：http://v4-alpha.getbootstrap.com/layout/grid/
Stack Overflow用户
发布于 2016-01-13 22:35:40
您可以使用Flexbox
ul {
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
li {
padding: 20px;
border: 1px solid black;
flex: 0 1 25%;
box-sizing: border-box;
margin: 5px 0;
}
@media(max-width: 768px) {
li {
flex: 0 1 33.333%;
}
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>大屏幕
小屏幕
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34778282
复制相关文章
相似问题
腾讯云开发者
