Question

我的代码让我用两条线连接了三个圆圈。看看这里：JSFIDDLE

这是我的代码：

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>

CSS

#horizontal
{
 width: 230px;
 border-bottom: 2px solid #CCCCCC;
 padding-top: 6px;
}
.circle {
  background: #CCCCCC;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border:1px solid #CCCCCC;
}

但是这不会响应，因为我正在设置宽度组件。无论如何，我可以使用twitter bootstrap使其响应。

使用@media查询对此案例无济于事。任何帮助将不胜感激。

Answer 1

有关信息：

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

重新访问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>

Answer 2

最简单的解决方案包含两个div和两个伪元素。 position: absolute将圈子保留在父级边框上，position: relative将圈子相对于父级保持定位。

Have an example!

HTML

<div class="parent"><div class="child"></div></div>

CSS

* {
  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;
}

Answer 3

试试这个：

<强> HTML：

<div class="responsive-circle"><i></i></div>

<强>的CSS：

.responsive-circle {
    height: 2px;
    background-color: #CCC;
    overflow: visible;
    position: relative;
}

.responsive-circle:before,
.responsive-circle:after,
.responsive-circle > i {
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border:1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle:after {
    right: 0;
}

.responsive-circle > i {
    left: 50%;
    left: calc(50% - 9px);
}

演示： http://jsfiddle.net/m787ydjz/

css：如何通过响应bootstrap的行连接圆圈？

3 个答案: