带有图标和图像占位符的 Bootstrap 响应式垂直时间线答案

【问题标题】：Bootstrap responsive vertical timeline with icons and image placeholders带有图标和图像占位符的 Bootstrap 响应式垂直时间线
【发布时间】：2016-06-01 00:42:36
【问题描述】：

我需要帮助来实现带有图标和占位符的垂直时间线。

我正在使用代码 sn-p here，但我无法通过 css3 克服时间线设计。

感谢您的帮助。

【问题讨论】：

@Paulie-D 该教程并未指导我使用 css 创建四分之一圆并在列表中实现它们。
所以这是唯一的问题......季度边界？你需要更具体。
你想让 Paulie 也为你编写代码吗？
是的，正如我的问题中提到的那样，我发现的麻烦是使用 css 创建垂直时间线设计，因为由列表制成的垂直堆叠成实心并删除了四分之一圆边框。
所以也许你应该edit 这个问题来解释你所追求的准确是什么以及你试图做些什么来解决它，目前这是只是一个模糊的代码请求问题。对 SO 的搜索也可能会发现以前出现过这种情况。

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

问题似乎是您想要的四分之一圆边框。

这可以通过在元素上设置一个简单的旋转变换然后以其他方式旋转任何内容来实现。

然后可以单独设置边框颜色。

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  text-align: center;
}
div {
  display: inline-block;
  padding: 1em;
  border-style: solid;
  border-width: 2px;
  border-color: grey transparent;
  margin: 1em;
  border-radius: 50%;
  transform: rotate(45deg);
  font-size: 36px
}
div i {
  transform: rotate(-45deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <i class="fa fa-suitcase"></i>
</div>

【讨论】：

Paulie，我喜欢你的方法，以后会尝试。我试图在无序列表上设置四分之一的样式，这些列表创建了垂直时间线，之前和之后的课程变得更加混乱，我尝试的次数越多。遵守代码 sn-p，我会将您的代码实现到时间线徽章

【解决方案2】：

 .glyphicon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(-50%, -50%);
}

【讨论】：