如何从css或bootstrap实现这条水平线

Question

我正在一个涉及html，css和bootstrap的项目中进行前端设计。

有没有办法从bootstrap本身或使用核心css获取此视图？ 有人可以给我一个代码如何获得这一行

Answer 1

嗯，这可以通过100种方式完成，这可能不是最干净的方式，但它有效:) 我正在创建一个div.line，其中包含3个div.bullets，其中最后一个项目符号在分配给它之前和之后。

JSFIDDLE

Answer 2

这是使用pseudo元素的仅CSS解决方案。调整大小时，此解决方案将调整为页面宽度。

＆＃13;

＆＃13;

ul,
li {
  list-style: none;
}
li {
  float: left;
  position: relative;
  height: 2px;
  width: 30%;
  background-color: cornflowerblue;
}
li:before {
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  top: 1px;
  transform: translateY(-50%);
  background-color: cornflowerblue;
}
li:last-child {
  width: 0px;
}

＆＃13;

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

＆＃13;

＆＃13;

＆＃13;