css：如何使线通过响应引导线连接？ [英] css: how to make circles connected by lines responsive with bootstrap?

问题描述

我有代码，我得到三个圆由两行连接。看看这里： JSFIDDLE

这里是我的代码：

HTML

  ; div class =form-group> 
< div class =col-md-4>< / div> 
< div class =col-md-4> 
< div class =circlestyle =float：left;>< / div> 
< div id =horizo​​ntalstyle =float：left;>< / div> 
< div class =circlestyle =float：right;>< / div> 
< div id =horizo​​ntalstyle =float：right;>< / div> 
< div class =circle>< / div> 
< / div> 
< div class =col-md-4>< / div> 
< / div> 
< / div> 
  

CSS

  #horizo​​ntal 
 {
 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 查询无法帮助这种情况。任何帮助将不胜感激。

解决方案

最简单的解决方案包含两个div和两个伪元素。 position：absolute 将圆圈保留在父节点边框， position：relative / p>

举个例子！

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

I have the code which got me three circles connected by two lines. Have a look here: JSFIDDLE

Here is my code:

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

But this wont be responsive as i am setting width component to it. Is there anyway i can make it responsive using twitter bootstrap.

Using @media queries wont help for this case. Any help will be appreciated.

解决方案

The simplest solution contains two divs and two pseudo elements. position: absolute keeps the circles over the parents border and position: relative keeps the circles positioned relative to the parent.

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

这篇关于css：如何使线通过响应引导线连接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！