Question

我通过 betul 获得了一个bootstrap v2时间轴模板。

查看：

http://codepen.io/betdream/full/Ifvbi/

编辑：

http://codepen.io/betdream/pen/Ifvbi

它的工作正常，但是这个版本在左右项之间有差距。

是否可以消除它们之间的空白？

//仅用于创建问题：）

.timeline { list-style: none; padding: 20px 0 20px; position: relative; }

还是有人知道任何没有差距的版本，比如google plus或者什么？

Answer 1

听起来Bootstrap模板不是您的最佳选择。如果您希望日期内容与之前和之后的内容互锁，您需要更具动态性的内容，例如Masonry。

这是我为你编辑的一个例子。它显示了你在这里的2列，无论日期内容的长度如何，它都会互锁。因此无需添加负边距等。

http://codepen.io/emaildano/pen/LEbLeQ

<section class="grid-container">
  <div class="grid">
    <a href="#"><div class="item i1">
     <span class="date">2015</span>
     <p class="title">Content</p>
    </a>
  </div>
</section>

html, body {
  background: #333;
  font-family: Helvetica;
}

.grid-container {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.toggle {
  text-align: center;
  padding: 0;
  color: white;
}

.toggle li {
  display: inline;
  padding: 0 60px;
}

.toggle label {
  font-size: 1.2em;
  padding: 0 10px;
}

.grid {
  margin: 0 auto;
}

.item {
  color: white;
  display: table;
  font-size: 1.4em;
  text-align: center;
  margin: 5px;
  width: 450px;
}

.item:hover .title {
  opacity: 1;
}

.title {
  display: table-cell;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}

.i1, .i3, .i6, .i7  {
  background: #2ecc71;
  height: 280px;
}

.i2, .i4, .i5, .i8 {
  background: #e74c3c;
  height: 180px;
}

.i9, .i10, .i11, .i12, .i13, .i14, .i15 {
  background: #e74c3c;
  height: 180px;
}

.i4 {
  height: 349px;
}

.expand {
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  -webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
  height: 100%;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  z-index: 99;
  text-indent: -9999px;
}

.date {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  border-radius: 50%;
  height: 75px;
  width: 75px;
  color: #000;
  display: block;
  line-height: 3.7;
  font-size: 20px
}

jQuery(document).ready(function ($) {

  var $container = $('.grid').masonry({
    columnWidth: 10,
    itemSelector: '.item',
    isFitWidth: true
  });

  var arrGreen = new Array($('.i1'),$('.i3'),$('.i6'),$('.i7'));
  var arrRed = new Array($('.i2'),$('.i4'),$('.i5'),$('.i8'), $('.i9'),$('.i10'),$('.i11'),$('.i12'), $('.i13'),$('.i14'),$('.i15'));

  $('input').click(function () {
    $('.item').removeClass('expand');

    if ($('.green').is(':checked')) {
      $container.masonry('hide', arrRed);
      $(arrGreen).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    } else if ($('.red').is(':checked')) {
      $container.masonry('hide', arrGreen);
      $(arrRed).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    } else if ($('.all').is(':checked')) {
      $(arrGreen).each(function (index, element) {
        element.show();
      });
      $(arrRed).each(function (index, element) {
        element.show();
      });
      $container.masonry();
    }
  });

  $('.item').click(function () {
    $(this).toggleClass('expand');
  });

});

如果您想要移动，这也是一个很好的选择，因为Masonry会根据浏览器的宽度进行调整。因此，您的2列将变为1，它们仍然可以完美排列而不会重叠。

Masonry Timeline Example

希望有所帮助！

Bootstrap时间线模板 - 删除差距

1 个答案: