删除最后一项时间轴上的拖尾行程boostrap

Question

我正试图删除下面时间轴最后一项后面的尾行水平行。我曾尝试创建一个不起作用的类timeline-item-last。我相信这有一个更优雅的方式。有任何想法吗？

.timeline-item-last { 

    border-right: 0px solid #ffffff !important; 

} 

这里是小提琴https://jsfiddle.net/usershakalaka/sjduc836/

Answer 1

如果您删除，因为它是不再需要.timeline-horizontal:before伪类，并与更换.timeline:before选择：

.timeline:before { 
    top: auto; 
    bottom: 45px; 
    position: absolute; 
    height: 4px; 
    content: ""; 
    background-color: #eeeeee; 
    left: 40px; 
    width: 65%; 
    margin-left: -1.5px; 
} 

应该解决这个问题。

小提琴here。

Answer 2

在这里，你去了一个解决方案https://jsfiddle.net/sjduc836/6/

getPos = function(){ 
 
    $('.horizontalLine').css({ 
 
    left: $('.timeline-badge').first().position().left, 
 
    width: $('.timeline-item-last').position().left 
 
    }); 
 
} 
 

 
getPos(); 
 

 
$(window).resize(function(){ 
 
\t getPos(); 
 
});

/* Timeline */ 
 
.timeline, 
 
.timeline-horizontal { 
 
    list-style: none; 
 
    padding: 20px; 
 
    position: relative; 
 
} 
 
.horizontalLine { 
 
    bottom: 55px; 
 
    position: absolute; 
 
    content: " "; 
 
    width: 100%; 
 
    background-color: #eeeeee; 
 
    margin-left: -1.5px; 
 
    height: 3px; 
 
} 
 
.timeline .timeline-item { 
 
    margin-bottom: 20px; 
 
    position: relative; 
 
} 
 
.timeline .timeline-item:before, 
 
.timeline .timeline-item:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.timeline .timeline-item:after { 
 
    clear: both; 
 
} 
 
.timeline .timeline-item .timeline-badge { 
 
    color: #fff; 
 
    width: 54px; 
 
    height: 54px; 
 
    line-height: 52px; 
 
    font-size: 22px; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 18px; 
 
    left: 50%; 
 
    margin-left: -25px; 
 
    background-color: #7c7c7c; 
 
    border: 3px solid #ffffff; 
 
    z-index: 100; 
 
    border-top-right-radius: 50%; 
 
    border-top-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    border-bottom-left-radius: 50%; 
 
} 
 
.timeline .timeline-item .timeline-badge i, 
 
.timeline .timeline-item .timeline-badge .fa, 
 
.timeline .timeline-item .timeline-badge .glyphicon { 
 
    top: 2px; 
 
    left: 0px; 
 
} 
 
.timeline .timeline-item .timeline-badge.primary { 
 
    background-color: #1f9eba; 
 
} 
 
.timeline .timeline-item .timeline-badge.info { 
 
    background-color: #5bc0de; 
 
} 
 
.timeline .timeline-item .timeline-badge.success { 
 
    background-color: #59ba1f; 
 
} 
 
.timeline .timeline-item .timeline-badge.warning { 
 
    background-color: #d1bd10; 
 
} 
 
.timeline .timeline-item .timeline-badge.danger { 
 
    background-color: #ba1f1f; 
 
} 
 
.timeline .timeline-item .timeline-panel { 
 
    position: relative; 
 
    width: 46%; 
 
    float: left; 
 
    right: 16px; 
 
    border: 1px solid #c0c0c0; 
 
    background: #ffffff; 
 
    border-radius: 2px; 
 
    padding: 20px; 
 
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); 
 
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); 
 
} 
 
.timeline .timeline-item .timeline-panel:before { 
 
    position: absolute; 
 
    top: 26px; 
 
    right: -16px; 
 
    display: inline-block; 
 
    border-top: 16px solid transparent; 
 
    border-left: 16px solid #c0c0c0; 
 
    border-right: 0 solid #c0c0c0; 
 
    border-bottom: 16px solid transparent; 
 
    content: " "; 
 
} 
 
.timeline .timeline-item .timeline-panel .timeline-title { 
 
    margin-top: 0; 
 
    color: inherit; 
 
} 
 
.timeline .timeline-item .timeline-panel .timeline-body > p, 
 
.timeline .timeline-item .timeline-panel .timeline-body > ul { 
 
    margin-bottom: 0; 
 
} 
 
.timeline .timeline-item .timeline-panel .timeline-body > p + p { 
 
    margin-top: 5px; 
 
} 
 
.timeline .timeline-item:last-child:nth-child(even) { 
 
    float: right; 
 
} 
 
.timeline .timeline-item:nth-child(even) .timeline-panel { 
 
    float: right; 
 
    left: 16px; 
 
} 
 
.timeline .timeline-item:nth-child(even) .timeline-panel:before { 
 
    border-left-width: 0; 
 
    border-right-width: 14px; 
 
    left: -14px; 
 
    right: auto; 
 
} 
 
.timeline-horizontal { 
 
    list-style: none; 
 
    position: relative; 
 
    padding: 20px 0px 20px 0px; 
 
    display: inline-block; 
 
} 
 
.timeline-horizontal:before { 
 
    height: 3px; 
 
    top: auto; 
 
    bottom: 26px; 
 
    left: 26px; 
 
    right: 0; 
 
    width: 100%; 
 
    margin-bottom: 20px; 
 
} 
 
.timeline-horizontal .timeline-item { 
 
    display: table-cell; 
 
    height: 280px; 
 
    width: 20%; 
 
    min-width: 120px; 
 
    float: none !important; 
 
    padding-left: 0px; 
 
    padding-right: 20px; 
 
    margin: 0 auto; 
 
    vertical-align: bottom; 
 
} 
 
.timeline-horizontal .timeline-item .timeline-panel { 
 
    top: auto; 
 
    bottom: 64px; 
 
    display: inline-block; 
 
    float: none !important; 
 
    left: 0 !important; 
 
    right: 0 !important; 
 
    width: 100%; 
 
    margin-bottom: 20px; 
 
} 
 
.timeline-horizontal .timeline-item .timeline-panel:before { 
 
    top: auto; 
 
    bottom: -16px; 
 
    left: 28px !important; 
 
    right: auto; 
 
    border-right: 16px solid transparent !important; 
 
    border-top: 16px solid #c0c0c0 !important; 
 
    border-bottom: 0 solid #c0c0c0 !important; 
 
    border-left: 16px solid transparent !important; 
 
} 
 
.timeline-item-last { 
 

 
    border-right: 0px solid #ffffff !important; 
 

 
} 
 
.timeline-horizontal .timeline-item:before, 
 
.timeline-horizontal .timeline-item:after { 
 
    display: none; 
 
} 
 
.timeline-horizontal .timeline-item .timeline-badge { 
 
    top: auto; 
 
    bottom: 0px; 
 
    left: 43px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-12"> 
 
\t \t \t \t \t <div class="page-header"> 
 
\t \t \t \t \t <h1>Horizontal timeline</h1> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div style="display:inline-block;width:100%;"> 
 
      
 
\t \t \t \t \t <ul class="timeline timeline-horizontal"> 
 
\t \t \t \t \t \t <li class="timeline-item"> 
 
\t \t \t \t \t \t \t <div class="timeline-badge primary"><i class="glyphicon glyphicon-check"></i></div> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="timeline-item"> 
 
\t \t \t \t \t \t \t <div class="timeline-badge primary"><i class="fa fa-car" aria-hidden="true"></i></div> 
 
\t \t \t \t \t \t \t <div class="timeline-panel"> 
 
\t \t \t \t \t \t \t \t <div class="timeline-heading"> 
 
\t \t \t \t \t \t \t \t \t <h4 class="timeline-title">Mussum cacilds 2</h4> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t <div class="timeline-body"> 
 
\t \t \t \t \t \t \t \t \t <p>Mussum ipsum cacilds, vidis faiz elementum girarzis, nisi eros gostis.</p> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </li> \t \t \t 
 
\t \t \t \t \t \t <li class="timeline-item timeline-item-last"> 
 
\t \t \t \t \t \t \t <div class="timeline-badge success"><i class="glyphicon glyphicon-check"></i></div> \t \t \t \t \t \t 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
      <div class="horizontalLine"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t 
 
\t \t </div>

而不是伪构件，我创建了一个DIV &计算基础上，第一 &的宽度l astli元件。