Html css：如何使用bootstrap使线连接的圆响应？

我有两条线连接三个圆圈的密码。请看这里：

这是我的密码：

HTML

<div class="form-group">
            <div class="col-md-4"></div>
            <div class="col-md-4">              
            <div class="circle" style="float:left;"></div>
            <div id="horizontal" style="float:left;"></div>
            <div class="circle" style="float: right;"></div>
            <div id="horizontal" style="float: right;"></div>
            <div class="circle"></div>
            </div>
            <div class="col-md-4"></div>
            </div>              
        </div>

但这不会有响应，因为我正在设置宽度分量。我是否可以使用

twitter引导程序使其响应

使用
@media
查询对这种情况没有帮助。任何帮助都将不胜感激。
最简单的解决方案包含两个div和两个伪元素
position:absolute
将圆保持在父边界上，而
position:relative
将圆保持在相对于父边界的位置


HTML

试试这个：

html:



css:

.responsivecircle{
高度：2倍；
背景色：#CCC；
溢出：可见；
位置：相对位置；
}
.响应圈：之前，
.回应圈：之后，
.响应圈>i{
背景:#中交;；
宽度：15px；
高度：15px；
边界半径：50%；
边框：1px实心#中交；
位置：绝对位置；
内容：“；
顶部：-7px；
}
.回应圈：之后{
右：0；
}
.响应圈>i{
左：50%；
左：计算（50%-9px）；
}

演示：
有关信息：

您也可以使用背景图像或渐变：

重新审视CSS

.form-group {
    background:linear-gradient(to top,#cccccc,#cccccc) repeat-x center;/* gradient can be replace for a 1pixel gray image */
    background-size:2px 2px;
    min-width:50px;/* keep those 3 15px boxes on one line */

}
.circle {
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border:1px solid #CCCCCC;
    margin:auto;
}

&更少的HTML

<div class="form-group">
    <div class="circle" style="float:left"></div>
    <div class="circle" style="float: right;"></div>
    <div class="circle"></div>
</div>

非常感谢您。我喜欢这个解决方案。：）这确实是最简单的解决办法。
* {
  margin:0;
  padding:0;
}

.parent {
  margin:100px 0 0;
  width:100%;
  border-bottom:2px solid #CCC;
  position:relative;
  z-index:-1;
}

.parent:before,.parent:after,.child {
  background:#CCC;
  width:15px;
  height:15px;
  border-radius:50%;
  border:1px solid #CCC;
  position:absolute;
  content:'';
  top:-8px;
}

.parent:before {
  left:0;
}

.parent:after {
  right:0;
}

.child {
  left:50%;
  margin-left:-8px;
}

.form-group {
    background:linear-gradient(to top,#cccccc,#cccccc) repeat-x center;/* gradient can be replace for a 1pixel gray image */
    background-size:2px 2px;
    min-width:50px;/* keep those 3 15px boxes on one line */

}
.circle {
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border:1px solid #CCCCCC;
    margin:auto;
}

<div class="form-group">
    <div class="circle" style="float:left"></div>
    <div class="circle" style="float: right;"></div>
    <div class="circle"></div>
</div>