lobotomized owl技术对于垂直元素列表很酷(比如堆叠的卡片列表,在移动设备上)但是如何将它用于元素网格(比如每行3张卡片,在桌面上)?
<div class="container">
<div class="row">
<div class="col-12 col-lg-4"><span>Card 1</span></div>
<div class="col-12 col-lg-4"><span>Card 2</span></div>
<div class="col-12 col-lg-4"><span>Card 3</span></div>
<div class="col-12 col-lg-4"><span>Card 4</span></div>
<div class="col-12 col-lg-4"><span>Card 5</span></div>
</div>
</div>
.row > * + * {
margin-top: 20px;
}
在这里查看codepen:https://codepen.io/anon/pen/MxxoMR(在示例中我放置了5张卡但显然项目是动态的,所以我不知道会有多少张卡)
你看到当卡片堆叠时效果很好但是当我每行有更多卡片时它不会:卡片2和卡片3有边缘顶部,而他们不必得到它。
你是如何处理这种情况的?
只需考虑所有卡的margin-bottom
并考虑主要容器的负边距:
.row > * {
margin-bottom: 20px;
}
.row {
margin-bottom:-20px;
}
/*styling*/
span {
background: #ddd;
display: block;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-lg-4"><span>Card 1</span></div>
<div class="col-12 col-lg-4"><span>Card 2</span></div>
<div class="col-12 col-lg-4"><span>Card 3</span></div>
<div class="col-12 col-lg-4"><span>Card 4</span></div>
<div class="col-12 col-lg-4"><span>Card 5</span></div>
</div>
<div class="row">
<div class="col-12 col-lg-4"><span>next row</span></div>
<div class="col-12 col-lg-4"><span>next row</span></div>
<div class="col-12 col-lg-4"><span>next row</span></div>
</div>
</div>