부트 스트랩 타임 라인 템플릿 - 간격 제거

Question

부트 스트랩 v2 타임 라인 템플릿 을 으로 만들었습니다.입니다.

보기 :

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

편집 :

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

그 잘 작동하지만이 버전은 왼쪽과 오른쪽 항목 사이의 간격이있다.

사이의 간격을 제거 할 수 있습니까?

// 그냥 질문을 :) 만들기위한

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

또는 누군가가 구글 플러스 뭔가 같은 틈없이 버전을 알고 있습니까?

Answer 1

부트 스트랩 템플릿이 최상의 선택이 아닌 것 같습니다. 날짜 내용을 이전 및 이후 날짜와 연동 시키려면 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'); 
    }); 

}); 

당신은 벽돌 브라우저의 폭에 따라 조정하기 때문에 모바일을 이동하려는 경우도 훌륭한 옵션입니다

. 따라서 2 열은 1이되고 중복되지 않고 계속 정렬됩니다. 도움이

---

희망!