引导网格不会分解为偶数列
引导网格不会分解为偶数列
提问于 2019-05-24 03:23:21
我正在尝试为我的公文包页面的项目部分设置一个引导网格。我想使3x3网格是移动响应的，并分解为2列网格，然后是1x6网格。
问题是:在中视口中，栅格分解成不均匀的列:第一行有2个项目，下一行有1个项目，下一行有2个项目，以此类推。我希望3x3网格分解成2列网格，其中前4行有两个项目，最后一行有一个项目。
我看过类似的问题，我发现没有冲突的CSS可能会扰乱引导网格系统。我玩了不同的md，sm，lg设置，得到了相同或更差的结果。
下面是我的html：
<div class="container">
<div class="row">
<div class="col">
<div class="tile"></div>
</div>
<div class="col">
<div class="tile"></div>
</div>
<div class="col">
<div class="tile"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="tile"></div>
</div>
<div class="col">
<div class="tile"></div>
</div>
<div class="col">
<div class="tile"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="tile"></div>
</div>
<div class="col">
<div class="tile"></div>
</div>
<div class="col">
<div class="tile"></div>
</div>
</div>
</div>这是我的CSS：
.tile {
height: 200px;
width: 150px;
background-color: green;
[enter image description here][1]margin-bottom: 20px;
}下面的代码显示了具有不希望看到的效果的网格：https://codepen.io/wileybb/pen/mYXoxJ
谢谢!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56281745
复制相关文章
相似问题
腾讯云开发者
