圈子之间的HTML线

时间:2015-09-01 20:19:01

标签: html css less

我正在努力实现这样的目标:

enter image description here

但这是我设法做到的。

enter image description here

你能帮我找到理想的结果吗?

更新:

如果我删除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">&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>

2 个答案:

答案 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;
  }
}