javascript - 使用过渡时 Bootstrap 列为空

Question

我有一个 Rails 应用程序，它使用模型来填充索引页。索引页使用 Bootstrap 列和行显示。我添加了一个过渡以使悬停时的框更高。我喜欢当连续第一个框悬停在上方时它们的外观，但是当中间或最后一个框变高时，它会在左侧留下空白空间。我在谷歌上进行了广泛的搜索，但我要么搜索了错误的东西，要么遗漏了一些东西。

我的问题是:如何才能使高盒子左侧的空白空间被小盒子填充，使其左右看起来相同。如有必要，我愿意接受 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) {}满足您的需求!