[英]css: how to make circles connected by lines responsive with bootstrap?
I have the code which got me three circles connected by two lines. 我的代码让我用两条线连接了三个圆圈。 Have a look here: JSFIDDLE
看看这里: JSFIDDLE
Here is my code: 这是我的代码:
HTML 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 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
. 无论如何,我可以使用
twitter bootstrap
使其响应。
Using @media
queries wont help for this case. 使用
@media
查询对这种情况不会有帮助。 Any help will be appreciated. 任何帮助将不胜感激。
For info: 有关信息:
You could use a background-image or gradient too : DEMO 您也可以使用背景图像或渐变: DEMO
CSS revisited 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;
}
& less HTML 少了HTML
<div class="form-group">
<div class="circle" style="float:left"></div>
<div class="circle" style="float: right;"></div>
<div class="circle"></div>
</div>
The simplest solution contains two divs and two pseudo elements. 最简单的解决方案包含两个div和两个伪元素。
position: absolute
keeps the circles over the parents border and position: relative
keeps the circles positioned relative to the parent. position: absolute
将圆圈保持在父级边框和position: relative
使圆圈相对于父级保持定位。
HTML HTML
<div class="parent"><div class="child"></div></div>
CSS 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;
}
Try this: 尝试这个:
html: HTML:
<div class="responsive-circle"><i></i></div>
css: 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);
}
demo: http://jsfiddle.net/m787ydjz/ 演示: http : //jsfiddle.net/m787ydjz/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.