Question

我有一个rails应用程序，它使用模型来填充索引页面。使用引导列和行显示索引页面。我添加了一个过渡，使盒子在悬停时更高。我喜欢它们看起来当连续的第一个徘徊在但当中间或最后一个盒子变高时，它留下空的空间到左边。我已广泛搜索，但我要么是在搜索错误的内容，要么是在遗漏某些内容。

我的问题是：我怎样才能让高箱子左边的空白空间充满小盒子，使它看起来与左右相同。如果有必要，我愿意接受javascript / jQuery解决方案。

提前谢谢！

This is what I want

This is what I am getting方框左侧的空白区域

Answer 1

试试这个：

<div class="masonry">
  <div class="box" id="a">A</div>
  [...]
</div>

和css：

.box {
  height: 25px;
  border: 1px solid black;
  border-radius: 15px;
  transition:height 0.5s; /* Animation time */
  -webkit-transition:height 0.5s; /* For Safari */
  &:hover {
    height: 50px;
  }

  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
    position: static;
}
.masonry {
    column-count: 4;
}

目前每行固定为4列，但您可以使用column-count动态更改@media (min-width: ...px) {}来改变这一点，以满足您的需求！

Bootstrap Column使用转换时为空格

1 个答案: