我正在努力实现这样的目标:
但这是我设法做到的。
你能帮我找到理想的结果吗?
更新:
如果我删除bootstrap.css依赖项,问题就会消失。如何使它与bootstrap一起使用?
CodePen(在设置中添加bootstrap.css以查看问题)
.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"> </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>
答案 0 :(得分: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.
答案 1 :(得分:0)
更改
.circle-wrap {
position: absolute;
> .circle {
position: relative;
left: -30px;
}
}
到
.circle-wrap {
position: absolute;
& > .circle {
position: relative;
left: -30px;
}
}