2 предмета в тот же день на временной шкале
Я сделал временную шкалу, но я не уверен, как заставить код PHP иметь 2 блока на одну и ту же дату (Пример того, что я хочу сделать). Я старался, чтобы if проверял, совпадает ли последняя дата с новой, если это правильно, только добавьте элемент, а не метку, но проблема в том, что я не знаю, как это сделать некоторое время.
.timeline{width:100%;position:relative;padding:1px 0;list-style:none;font-weight:300}.timeline .timeline-item{padding-left:0;padding-right:30px}.timeline .timeline-item .time{color:#999;float:right;font-size:12px;padding:10px}.timeline .timeline-label{position:relative;float:left;clear:left;width:50%;margin-bottom:20px;top:1px;width:100%;margin-left:auto;margin-right:auto;padding:0;text-align:center}.timeline .timeline-label span{font-weight:600;padding:8px;display:inline-block;background-color:#fff;border-radius:4px;color:#fff;font-size:1em}.timeline .timeline-label .fa{width:30px;height:30px;font-size:1em;line-height:30px;border-radius:50%;text-align:center;background:#d2d6de}.timeline .timeline-item.timeline-item-right,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left){padding-left:30px;padding-right:0}.timeline .timeline-item .timeline-event{width:100%}.timeline:before{border-right-style:solid}.timeline:after,.timeline:before{content:" ";display:block}.timeline:after{clear:both}.timeline:before{content:"";position:absolute;top:0;left:0;bottom:0;width:50%;height:100% !important;margin-left:1px;border-right-width:2px;border-right-style:solid;border-right-color:#ccc}.timeline.timeline-line-solid:before{border-right-style:solid}.timeline.timeline-line-dashed:before{border-right-style:dashed}.timeline.timeline-line-hidden:before{border-right-style:none}.timeline .timeline-item{position:relative;float:left;clear:left;width:50%;margin-bottom:20px;border-radius:1px solid #ddd}.timeline .timeline-item:after,.timeline .timeline-item:before{content:"";display:table}.timeline .timeline-item:after{clear:both}.timeline .timeline-item:last-child{margin-bottom:0 !important}.timeline .timeline-item.timeline-item-right>.timeline-event,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left)>.timeline-event{float:right !important}.timeline .timeline-item.timeline-item-right>.timeline-event:after,.timeline .timeline-item.timeline-item-right>.timeline-event:before,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline .timeline-item.timeline-item-right>.timeline-event:before,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{left:-15px !important;border-right-width:15px !important}.timeline .timeline-item.timeline-item-right>.timeline-event:after,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after{left:-14px !important;border-right-width:14px !important}.timeline .timeline-item>.timeline-event:before{top:10px;right:-15px;border-top:15px solid transparent;border-left-width:15px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:15px solid transparent}.timeline .timeline-item>.timeline-event:after{top:11px;right:-14px;border-top:14px solid transparent;border-left-width:14px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:14px solid transparent}.timeline .timeline-item>.timeline-point{top:25px}.timeline-single-column.timeline .timeline-item>.timeline-event{float:right !important}.timeline-single-column.timeline .timeline-item>.timeline-event:after,.timeline-single-column.timeline .timeline-item>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline-single-column.timeline .timeline-item>.timeline-event:before{left:-15px !important;border-right-width:15px !important}.timeline-single-column.timeline .timeline-item>.timeline-event:after{left:-14px !important;border-right-width:14px !important}.timeline .timeline-item:nth-of-type(2){margin-top:40px}.timeline .timeline-item.timeline-item-left,.timeline .timeline-item.timeline-item-right{clear:both !important}.timeline .timeline-item.timeline-item-left+.timeline-item:not(.timeline-item-left):not(.timeline-item-right),.timeline .timeline-item.timeline-item-right+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline .timeline-item.timeline-item-left+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right),.timeline .timeline-item.timeline-item-right+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:40px}.timeline .timeline-item.timeline-item-left+.timeline-item:not(.timeline-item-left):not(.timeline-item-right),.timeline .timeline-item.timeline-item-right+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){clear:both}.timeline .timeline-item.timeline-item-right,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left){float:right;clear:right}.timeline .timeline-item.timeline-item-right>.timeline-point,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left)>.timeline-point{left:-24px}.timeline .timeline-item.timeline-item-right>.timeline-point.timeline-point-blank,.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left)>.timeline-point.timeline-point-blank{left:-12px}.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right>.timeline-event,.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left)>.timeline-event{float:right !important}.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right>.timeline-event:before,.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right>.timeline-event:before,.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{left:-10px !important;border-right-width:10px !important}.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after{left:-9px !important;border-right-width:9px !important}.timeline .timeline-item.timeline-item-arrow-sm>.timeline-event:before{top:4px;right:-10px;border-top:10px solid transparent;border-left-width:10px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:10px solid transparent}.timeline .timeline-item.timeline-item-arrow-sm>.timeline-event:after{top:5px;right:-9px;border-top:9px solid transparent;border-left-width:9px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:9px solid transparent}.timeline .timeline-item.timeline-item-arrow-sm>.timeline-point{top:14px}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm>.timeline-event{float:right !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm>.timeline-event:after,.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm>.timeline-event:before{left:-10px !important;border-right-width:10px !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm>.timeline-event:after{left:-9px !important;border-right-width:9px !important}.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right>.timeline-event,.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left)>.timeline-event{float:right !important}.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right>.timeline-event:before,.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right>.timeline-event:before,.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{left:-15px !important;border-right-width:15px !important}.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after{left:-14px !important;border-right-width:14px !important}.timeline .timeline-item.timeline-item-arrow-md>.timeline-event:before{top:10px;right:-15px;border-top:15px solid transparent;border-left-width:15px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:15px solid transparent}.timeline .timeline-item.timeline-item-arrow-md>.timeline-event:after{top:11px;right:-14px;border-top:14px solid transparent;border-left-width:14px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:14px solid transparent}.timeline .timeline-item.timeline-item-arrow-md>.timeline-point{top:25px}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md>.timeline-event{float:right !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md>.timeline-event:after,.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md>.timeline-event:before{left:-15px !important;border-right-width:15px !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md>.timeline-event:after{left:-14px !important;border-right-width:14px !important}.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right>.timeline-event,.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left)>.timeline-event{float:right !important}.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right>.timeline-event:before,.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right>.timeline-event:before,.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left)>.timeline-event:before{left:-18px !important;border-right-width:18px !important}.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right>.timeline-event:after,.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left)>.timeline-event:after{left:-17px !important;border-right-width:17px !important}.timeline .timeline-item.timeline-item-arrow-lg>.timeline-event:before{top:10px;right:-18px;border-top:18px solid transparent;border-left-width:18px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:18px solid transparent}.timeline .timeline-item.timeline-item-arrow-lg>.timeline-event:after{top:11px;right:-17px;border-top:17px solid transparent;border-left-width:17px;border-left-style:solid;border-right-width:0;border-right-style:solid;border-bottom:17px solid transparent}.timeline .timeline-item.timeline-item-arrow-lg>.timeline-point{top:28px}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg>.timeline-event{float:right !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg>.timeline-event:after,.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg>.timeline-event:before{left:-18px !important;border-right-width:18px !important}.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg>.timeline-event:after{left:-17px !important;border-right-width:17px !important}.timeline .timeline-item>.timeline-event{background:#f0f0f0;border:1px solid #ccc;color:#555;position:relative;float:left;border-radius:3px}.timeline .timeline-item>.timeline-event:before{border-left-color:#bbb;border-right-color:#bbb}.timeline .timeline-item>.timeline-event:after{border-left-color:#fff;border-right-color:#fff}.timeline .timeline-item>.timeline-event .timeline-inherit-color,.timeline .timeline-item>.timeline-event h1,.timeline .timeline-item>.timeline-event h2,.timeline .timeline-item>.timeline-event h3,.timeline .timeline-item>.timeline-event h4,.timeline .timeline-item>.timeline-event h5,.timeline .timeline-item>.timeline-event h6,.timeline .timeline-item>.timeline-event p{color:inherit}.timeline .timeline-item>.timeline-event.timeline-event-default{background:#fff;border:1px solid #888888;color:#555}.timeline .timeline-item>.timeline-event.timeline-event-default:before{border-left-color:#888888;border-right-color:#888888}.timeline .timeline-item>.timeline-event.timeline-event-default:after{border-left-color:#fff;border-right-color:#fff}.timeline .timeline-item>.timeline-event.timeline-event-default .timeline-inherit-color,.timeline .timeline-item>.timeline-event.timeline-event-default h1,.timeline .timeline-item>.timeline-event.timeline-event-default h2,.timeline .timeline-item>.timeline-event.timeline-event-default h3,.timeline .timeline-item>.timeline-event.timeline-event-default h4,.timeline .timeline-item>.timeline-event.timeline-event-default h5,.timeline .timeline-item>.timeline-event.timeline-event-default h6,.timeline .timeline-item>.timeline-event.timeline-event-default p{color:inherit}.timeline .timeline-item>.timeline-event.timeline-event-primary{background:#f5f5f5;border:1px solid #888888;color:#555}.timeline .timeline-item>.timeline-event.timeline-event-primary:before{border-left-color:#888888;border-right-color:#888888}.timeline .timeline-item>.timeline-event.timeline-event-primary:after{border-left-color:#f5f5f5;border-right-color:#f5f5f5}.timeline .timeline-item>.timeline-event.timeline-event-primary .timeline-inherit-color,.timeline .timeline-item>.timeline-event.timeline-event-primary h1,.timeline .timeline-item>.timeline-event.timeline-event-primary h2,.timeline .timeline-item>.timeline-event.timeline-event-primary h3,.timeline .timeline-item>.timeline-event.timeline-event-primary h4,.timeline .timeline-item>.timeline-event.timeline-event-primary h5,.timeline .timeline-item>.timeline-event.timeline-event-primary h6,.timeline .timeline-item>.timeline-event.timeline-event-primary p{color:inherit}.timeline .timeline-item>.timeline-event.timeline-event-success{background:#F3F8ED;border:1px solid #72b92e;color:#3F8100}.timeline .timeline-item>.timeline-event.timeline-event-success:before{border-left-color:#72b92e;border-right-color:#72b92e}.timeline .timeline-item>.timeline-event.timeline-event-success:after{border-left-color:#F3F8ED;border-right-color:#F3F8ED}.timeline .timeline-item>.timeline-event.timeline-event-success .timeline-inherit-color,.timeline .timeline-item>.timeline-event.timeline-event-success h1,.timeline .timeline-item>.timeline-event.timeline-event-success h2,.timeline .timeline-item>.timeline-event.timeline-event-success h3,.timeline .timeline-item>.timeline-event.timeline-event-success h4,.timeline .timeline-item>.timeline-event.timeline-event-success h5,.timeline .timeline-item>.timeline-event.timeline-event-success h6,.timeline .timeline-item>.timeline-event.timeline-event-success p{color:inherit}.timeline .timeline-item>.timeline-event.timeline-event-info{background:#F0F8FD;border:1px solid #3e93cf;color:#0062A7}.timeline .timeline-item>.timeline-event.timeline-event-info:before{border-left-color:#3e93cf;border-right-color:#3e93cf}.timeline .timeline-item>.timeline-event.timeline-event-info:after{border-left-color:#F0F8FD;border-right-color:#F0F8FD}.timeline .timeline-item>.timeline-event.timeline-event-info .timeline-inherit-color,.timeline .timeline-item>.timeline-event.timeline-event-info h1,.timeline .timeline-item>.timeline-event.timeline-event-info h2,.timeline .timeline-item>.timeline-event.timeline-event-info h3,.timeline .timeline-item>.timeline-event.timeline-event-info h4,.timeline .timeline-item>.timeline-event.timeline-event-info h5,.timeline .timeline-item>.timeline-event.timeline-event-info h6,.timeline .timeline-item>.timeline-event.timeline-event-info p{color:inherit}.timeline .timeline-item>.timeline-event.timeline-event-warning{background:#FFF9E9;border:1px solid #d0aa42;color:#ac7e00}.timeline .timeline-item>.timeline-event.timeline-event-warning:before{border-left-color:#d0aa42;border-right-color:#d0aa42}.timeline .timeline-item>.timeline-event.timeline-event-warning:after{border-left-color:#FFF9E9;border-right-color:#FFF9E9}.timeline .timeline-item>.timeline-event.timeline-event-warning .timeline-inherit-color,.timeline .timeline-item>.timeline-event.timeline-event-warning h1,.timeline .timeline-item>.timeline-event.timeline-event-warning h2,.timeline .timeline-item>.timeline-event.timeline-event-warning h3,.timeline .timeline-item>.timeline-event.timeline-event-warning h4,.timeline .timeline-item>.timeline-event.timeline-event-warning h5,.timeline .timeline-item>.timeline-event.timeline-event-warning h6,.timeline .timeline-item>.timeline-event.timeline-event-warning p{color:inherit}.timeline .timeline-item>.timeline-event.timeline-event-danger{background:#FFC4BC;border:1px solid #d25a4b;color:#B71500}.timeline .timeline-item>.timeline-event.timeline-event-danger:before{border-left-color:#d25a4b;border-right-color:#d25a4b}.timeline .timeline-item>.timeline-event.timeline-event-danger:after{border-left-color:#FFC4BC;border-right-color:#FFC4BC}.timeline .timeline-item>.timeline-event.timeline-event-danger .timeline-inherit-color,.timeline .timeline-item>.timeline-event.timeline-event-danger h1,.timeline .timeline-item>.timeline-event.timeline-event-danger h2,.timeline .timeline-item>.timeline-event.timeline-event-danger h3,.timeline .timeline-item>.timeline-event.timeline-event-danger h4,.timeline .timeline-item>.timeline-event.timeline-event-danger h5,.timeline .timeline-item>.timeline-event.timeline-event-danger h6,.timeline .timeline-item>.timeline-event.timeline-event-danger p{color:inherit}.timeline .timeline-item>.timeline-event:after,.timeline .timeline-item>.timeline-event:before{content:"";display:inline-block;position:absolute}.timeline .timeline-item>.timeline-event .timeline-body,.timeline .timeline-item>.timeline-event .timeline-footer,.timeline .timeline-item>.timeline-event .timeline-heading{padding:4px 10px}.timeline .timeline-item>.timeline-event .timeline-heading{color:#555;border-bottom:1px solid #ccc;font-size:16px;line-height:1.1}.timeline .timeline-item>.timeline-event .timeline-body p,.timeline .timeline-item>.timeline-event .timeline-body ul,.timeline .timeline-item>.timeline-event .timeline-footer p,.timeline .timeline-item>.timeline-event .timeline-footer ul,.timeline .timeline-item>.timeline-event .timeline-heading p,.timeline .timeline-item>.timeline-event .timeline-heading ul{margin-bottom:0}.timeline .timeline-item>.timeline-event .timeline-heading h4{font-weight:400}.timeline .timeline-item>.timeline-event .timeline-footer a{cursor:pointer;text-decoration:none}.timeline .timeline-item>.timeline-event .blankslate,.timeline .timeline-item>.timeline-event .panel,.timeline .timeline-item>.timeline-event .table{margin:0;border:none;border-radius:inherit;overflow:hidden}.timeline .timeline-item>.timeline-event .table th{border-top:0}.timeline .timeline-item>.timeline-point{color:#fff;background:#d2d6de;right:-24px;width:30px;height:30px;margin-top:-12px;margin-left:9px;margin-right:9px;position:absolute;z-index:100;border-radius:50%;line-height:30px;text-align:center;font-size:15px}.timeline .timeline-item>.timeline-point.timeline-point-blank{right:-12px;width:12px;height:12px;margin-top:-6px;margin-left:6px;margin-right:6px;color:#888888;background:#888888}.timeline .timeline-label:after,.timeline .timeline-label:before{content:"";display:table}.timeline .timeline-label:after{clear:both}.timeline .timeline-label:last-child{margin-bottom:0 !important}.timeline .timeline-label+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline .timeline-label+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:40px}@media all and (orientation: portrait){.timeline.timeline{width:100%;max-width:100%}.timeline.timeline .timeline-item{padding-left:72px;padding-right:0}.timeline.timeline .timeline-item.timeline-item-right,.timeline.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left){padding-left:72px;padding-right:0}.timeline.timeline .timeline-item .timeline-event{width:100%}.timeline.timeline:before{left:42px;width:0;margin-left:-1px}.timeline.timeline .timeline-item{width:100%;margin-bottom:20px}.timeline.timeline .timeline-item:nth-of-type(even){margin-top:0}.timeline.timeline .timeline-item.timeline-item-left+.timeline-item:not(.timeline-item-left):not(.timeline-item-right),.timeline.timeline .timeline-item.timeline-item-right+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline.timeline .timeline-item.timeline-item-left+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right),.timeline.timeline .timeline-item.timeline-item-right+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline.timeline .timeline-item>.timeline-event{float:right !important}.timeline.timeline .timeline-item>.timeline-event:after,.timeline.timeline .timeline-item>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline.timeline .timeline-item>.timeline-event:before{left:-15px !important;border-right-width:15px !important}.timeline.timeline .timeline-item>.timeline-event:after{left:-14px !important;border-right-width:14px !important}.timeline.timeline .timeline-item>.timeline-point{transform:translateX(-50%);left:42px !important;margin-left:0}.timeline.timeline .timeline-label{transform:translateX(-50%);margin:0 0 20px 42px}.timeline.timeline .timeline-label+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline.timeline .timeline-label+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}}@media (max-width: 768px){.timeline.timeline{width:100%;max-width:100%}.timeline.timeline .timeline-item{padding-left:72px;padding-right:0}.timeline.timeline .timeline-item.timeline-item-right,.timeline.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left){padding-left:72px;padding-right:0}.timeline.timeline .timeline-item .timeline-event{width:100%}.timeline.timeline:before{left:42px;width:0;margin-left:-1px}.timeline.timeline .timeline-item{width:100%;margin-bottom:20px}.timeline.timeline .timeline-item:nth-of-type(even){margin-top:0}.timeline.timeline .timeline-item.timeline-item-left+.timeline-item:not(.timeline-item-left):not(.timeline-item-right),.timeline.timeline .timeline-item.timeline-item-right+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline.timeline .timeline-item.timeline-item-left+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right),.timeline.timeline .timeline-item.timeline-item-right+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline.timeline .timeline-item>.timeline-event{float:right !important}.timeline.timeline .timeline-item>.timeline-event:after,.timeline.timeline .timeline-item>.timeline-event:before{right:auto !important;border-left-width:0 !important}.timeline.timeline .timeline-item>.timeline-event:before{left:-15px !important;border-right-width:15px !important}.timeline.timeline .timeline-item>.timeline-event:after{left:-14px !important;border-right-width:14px !important}.timeline.timeline .timeline-item>.timeline-point{transform:translateX(-50%);left:42px !important;margin-left:0}.timeline.timeline .timeline-label{transform:translateX(-50%);margin:0 0 20px 42px}.timeline.timeline .timeline-label+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}.timeline.timeline .timeline-label+.timeline-item:not(.timeline-item-left):not(.timeline-item-right)+.timeline-item:not(.timeline-item-left):not(.timeline-item-right){margin-top:0}}.bg-red{background-color:#dd4b39 !important}.bg-gray{background-color:#d2d6de !important}.bg-primary{background-color:#3c8dbc !important}.bg-info{background-color:#00c0ef !important}.bg-success{background-color:#00a65a !important}.bg-warning{background-color:#f39c12 !important}.bg-danger{background-color:#f39c12 !important}.bg-blue{background-color:#0073b7 !important}.bg-green{background-color:#00a65a !important}.bg-purple{background-color:#605ca8 !important}
/*# sourceMappingURL=estilos.min.css.map */<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://lsgob.us/estilos.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<div class="timeline timeline-line-dotted">
<span class="timeline-label">
<i class="fa fa-clock-o bg-gray"></i>
</span>
<span class="timeline-label">
<span class="label bg-green">04 may. 2018</span>
</span>
<div class="timeline-item">
<div class="timeline-point bg-green">
<i class="fa fa-eye"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>Hey</h4>
</div>
<div class="timeline-body">
<p>Hey</p>
</div>
<div class="timeline-footer">
<p class="text-right">Footer</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label bg-green">04 may. 2018</span>
</span>
<div class="timeline-item">
<div class="timeline-point bg-green">
<i class="fa fa-eye"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>Hey</h4>
</div>
<div class="timeline-body">
<p>Hey</p>
</div>
<div class="timeline-footer">
<p class="text-right">Footer</p>
</div>
</div>
</div> <span class="timeline-label">
<span class="label bg-green">04 may. 2018</span>
</span>
<span class="timeline-label">
<i class="fa fa-fw fa-history"></i>
</span>
</div>
</div>
</div>
</div>Решение
Вам необходимо сохранить предыдущую дату из базы данных в переменной и сравнить ее с текущей датой из базы данных. Когда он был изменен, вы можете создать новый ярлык. Если он не был изменен, вы можете добавить элемент к текущей метке. Это будет выглядеть так (псевдокод):
$lastDate = null;
while ($row = ...) {
if ($lastDate != $row['date']) {
// change in date
closeCurrentLabel();
startNewLabel();
}
$lastDate = $row['date'];
addItemToLabel();
}
Другие решения
Других решений пока нет …