我正在尝试为我的公文包页面的项目部分设置一个引导网格。我想使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
谢谢!
发布于 2019-05-24 03:28:43
尝试删除每一行,如下所示:
此外,向列中添加宽度值可以真正帮助您实现所需的布局。
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
</div>
</div>
小提琴示例:
.tile {
height: 200px;
width: 150px;
background-color: green;
margin-bottom: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
</div>
</div>
https://stackoverflow.com/questions/56281745
复制相似问题