使用Lobotomized Owl处理元素网格的边距

问题描述 投票:1回答:1

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有边缘顶部,而他们不必得到它。

你是如何处理这种情况的?

css
1个回答
0
投票

只需考虑所有卡的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>
© www.soinside.com 2019 - 2024. All rights reserved.