Создайте отзывчивую временную шкалу с строками Bootstrap

Question

У меня есть макет с использованием бутстрапа. На мобильном устройстве, я хотел бы каждый из моих строк, которые будут расположены в виде точек на мой график, так что у меня есть конечный результат, как этот:

Для моего рабочего стола макет Я использую два тега, как показано ниже и просто разместите текст вокруг этой линии. Однако для мобильного макета было бы здорово, если бы строка с текстом в ней также содержала точку на временной шкале, поэтому они всегда выстраивались правильно, независимо от того, сколько строк накладывается на текст.

<div class="middle-line-top"></div> 
<div class="middle-line"></div> 

CSS:

.middle-line { 
    position: fixed; 
    height: 79vh; 
    bottom: 0; 
    width: 1px; 
    left: 50%; 
    background-color: white; 
    z-index: -1; 
} 
.middle-line:before { 
    border: 5px solid white; 
    width: 18px; 
    height: 18px; 
    display: block; 
    content: ''; 
    bottom: 100%; 
    -webkit-transform: translateX(-51%); 
    transform: translateX(-51%); 
    position: absolute; 
    box-sizing: border-box; 
    border-radius: 50%; 
    z-index: -1; 
} 
.middle-line-top { 
    position: fixed; 
    height: 3vh; 
    top: 0vh; 
    width: 1px; 
    left: 50%; 
    background-color: white; 
} 
.middle-line-top:after { 
    border: 5px solid white; 
    width: 18px; 
    height: 18px; 
    display: block; 
    content: ''; 
    -webkit-transform: translateX(-51%); 
    transform: translateX(-51%); 
    position: absolute; 
    bottom: -18px; 
    box-sizing: border-box; 
    border-radius: 50%; 
} 

Answer 1

Пожалуйста, попробуйте этот код

.timeline { 
 
    position: relative; 
 
    padding: 21px 0px 10px; 
 
    margin-top: 4px; 
 
    margin-bottom: 30px; 
 
} 
 

 
.timeline .line { 
 
    position: absolute; 
 
    width: 4px; 
 
    display: block; 
 
    background: currentColor; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    margin-left: 30px; 
 
} 
 

 
.timeline .separator { 
 
    border-top: 1px solid currentColor; 
 
    padding: 5px; 
 
    padding-left: 40px; 
 
    font-style: italic; 
 
    font-size: .9em; 
 
    margin-left: 30px; 
 
} 
 

 
.timeline .line::before { top: -4px; } 
 
.timeline .line::after { bottom: -4px; } 
 
.timeline .line::before, 
 
.timeline .line::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -4px; 
 
    width: 12px; 
 
    height: 12px; 
 
    display: block; 
 
    border-radius: 50%; 
 
    background: currentColor; 
 
} 
 

 
.timeline .panel { 
 
    position: relative; 
 
    margin: 10px 0px 21px 70px; 
 
    clear: both; 
 
} 
 

 
.timeline .panel::before { 
 
    position: absolute; 
 
    display: block; 
 
    top: 8px; 
 
    left: -24px; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border: inherit; 
 
    border-width: 12px; 
 
    border-top-color: transparent; 
 
    border-bottom-color: transparent; 
 
    border-left-color: transparent; 
 
} 
 

 
.timeline .panel .panel-heading.icon * { font-size: 20px; vertical-align: middle; line-height: 40px; } 
 
.timeline .panel .panel-heading.icon { 
 
    position: absolute; 
 
    left: -59px; 
 
    display: block; 
 
    width: 40px; 
 
    height: 40px; 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
.timeline .panel-outline { 
 
    border-color: transparent; 
 
    background: transparent; 
 
    box-shadow: none; 
 
} 
 

 
.timeline .panel-outline .panel-body { 
 
    padding: 10px 0px; 
 
} 
 

 
.timeline .panel-outline .panel-heading:not(.icon), 
 
.timeline .panel-outline .panel-footer { 
 
    display: none; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 
<div class="container"> 
 

 
    <!-- Page header --> 
 
    
 
    <div class="timeline"> 
 
    
 
     <!-- Line component --> 
 
     <div class="line text-muted"></div> 
 

 
     <!-- Separator --> 
 
     <div class="separator text-muted"> 
 
      <time>26. 3. 2015</time> 
 
     </div> 
 
     <!-- /Separator --> 
 
    
 
     <!-- Panel --> 
 
     <article class="panel panel-danger panel-outline"> 
 
    
 
      <!-- Icon --> 
 
      <div class="panel-heading icon"> 
 
       <i class="glyphicon glyphicon-heart"></i> 
 
      </div> 
 
      <!-- /Icon --> 
 
    
 
      <!-- Body --> 
 
      <div class="panel-body"> 
 
       <strong>Someone</strong> favourited your photo. 
 
      </div> 
 
      <!-- /Body --> 
 
    
 
     </article> 
 
     <!-- /Panel --> 
 
    
 
     <!-- Panel --> 
 
     <article class="panel panel-default panel-outline"> 
 
    
 
      <!-- Icon --> 
 
      <div class="panel-heading icon"> 
 
       <i class="glyphicon glyphicon-picture"></i> 
 
      </div> 
 
      <!-- /Icon --> 
 
    
 
      <!-- Body --> 
 
      <div class="panel-body"> 
 
       <img class="img-responsive img-rounded" src="//placehold.it/350x150" /> 
 
      </div> 
 
      <!-- /Body --> 
 
    
 
     </article> 
 
     <!-- /Panel --> 
 
    
 
     <!-- Panel --> 
 
     <article class="panel panel-primary"> 
 
    
 
      <!-- Icon --> 
 
      <div class="panel-heading icon"> 
 
       <i class="glyphicon glyphicon-plus"></i> 
 
      </div> 
 
      <!-- /Icon --> 
 
    
 
      <!-- Heading --> 
 
      <div class="panel-heading"> 
 
       <h2 class="panel-title">New content added</h2> 
 
      </div> 
 
      <!-- /Heading --> 
 
    
 
      <!-- Body --> 
 
      <div class="panel-body"> 
 
       Some new content has been added. 
 
      </div> 
 
      <!-- /Body --> 
 
    
 
      <!-- Footer --> 
 
      <div class="panel-footer"> 
 
       <small>Footer is also supported!</small> 
 
      </div> 
 
      <!-- /Footer --> 
 
    
 
     </article> 
 
     <!-- /Panel --> 
 

 
     <!-- Separator --> 
 
     <div class="separator text-muted"> 
 
      <time>25. 3. 2015</time> 
 
     </div> 
 
     <!-- /Separator --> 
 
    
 
     <!-- Panel --> 
 
     <article class="panel panel-success"> 
 
    
 
      <!-- Icon --> 
 
      <div class="panel-heading icon"> 
 
       <i class="glyphicon glyphicon-plus"></i> 
 
      </div> 
 
      <!-- /Icon --> 
 
    
 
      <!-- Heading --> 
 
      <div class="panel-heading"> 
 
       <h2 class="panel-title">New content added</h2> 
 
      </div> 
 
      <!-- /Heading --> 
 
    
 
      <!-- Body --> 
 
      <div class="panel-body"> 
 
       Anything you can write! 
 
      </div> 
 
      <!-- /Body --> 
 
    
 
      <!-- List group --> 
 
      <ul class="list-group"> 
 
       <li class="list-group-item">Like</li> 
 
       <li class="list-group-item">list</li> 
 
       <li class="list-group-item">groups</li> 
 
       <li class="list-group-item">and</li> 
 
       <li class="list-group-item">tables</li> 
 
      </ul> 
 
    
 
     </article> 
 
     <!-- /Panel --> 
 
    
 
     <!-- Panel --> 
 
     <article class="panel panel-info panel-outline"> 
 
    
 
      <!-- Icon --> 
 
      <div class="panel-heading icon"> 
 
       <i class="glyphicon glyphicon-info-sign"></i> 
 
      </div> 
 
      <!-- /Icon --> 
 
    
 
      <!-- Body --> 
 
      <div class="panel-body"> 
 
       That is all. 
 
      </div> 
 
      <!-- /Body --> 
 
    
 
     </article> 
 
     <!-- /Panel --> 
 
    
 
    </div> 
 
    <!-- /Timeline --> 
 

 
</div> 
 
</div>