圆圈之间的HTML线

Question

I am trying to achieve something like this:

But this is what I've managed to do.

Could you please help me to achieve desired result?

UPDATE:

Problem goes away if I remove bootstrap.css dependency. How can I make it work with bootstrap?

CodePen (add bootstrap.css in the settings to see an issue)

 .time-slice { display: flex; align-items: stretch; } .time-slice > * { padding: 20px; } .circle { width: 16px; height: 16px; background: #ffffff; border-radius: 32px; display: block; border: 2px solid #1A87B9; } .circle-wrap { position: absolute; } .circle-wrap > .circle { position: relative; left: -30px; } .date-time { flex-shrink: 0; flex-basis: 60px; } .date, .time { max-width: 90px; color: #999999; font-size: 13px; margin-top: 0; margin-bottom: 10px; } .point-title { border-left: 2px solid #1A87B9; } 

 <div id="ticketDetails"> <h1>Details</h1> <div class="time-slice row"> <div class="date-time"> <p class="time">10h 30min</p> <p class="date">&nbsp;</p> </div> <div class="circle-wrap"> <div class="circle"></div> </div> <div class="point-title"> <span> <b>Amsterdam (Schiphol)</b> </span> </div> </div> <div class="time-slice row"> <div class="date-time"> <p class="date">Fri 28 Aug</p> <p class="time">20:00</p> </div> <div class="circle-wrap"> <div class="circle"></div> </div> <div class="point-title"> <span> <b>Manchester (MAN)</b> </span> </div> </div> </div> 

Answer 1

The problem is in * {box-sizing: border-box} used by Bootstrap. Simply either set default box-sizing: content-box for .circle ( fixed codepen demo ) or take this property setting of the BS into account when you size/align your stuff.

Answer 2

change

.circle-wrap {
  position: absolute;
  > .circle {
    position: relative;
    left: -30px;
  }
}

to

.circle-wrap {
  position: absolute;
  & > .circle {
    position: relative;
    left: -30px;
  }
}