【发布时间】：2015-04-06 22:32:12
【问题描述】：
我正在尝试制作一个响应式网页。 我用这个question 和answer，为这个项目形成了我的图标圈。 但我想让它更具响应性，因为我需要在里面包装一些 jQuery toggle()。
<div class="jumbotron">
<div class="circle-container">
<div class="row">
<span data-scrollreveal="enter top, wait 1.0s">
<a href="#" class="center hvr-grow"><img src="img/specialoffers.jpg" class="img-circle" alt="">
</a>
</span>
<span data-scrollreveal="enter right, wait 1.2s">
<a href="#" class="deg0"><img src="img/circle/special.png" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter right, wait 1.4s">
<a href="#" class="deg45"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter right, wait 1.6s">
<a href="#" class="deg135"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 1.8s">
<a href="#" class="deg180"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
</span>
<span data-scrollreveal="enter left, wait 2.0s">
<a href="#" class="deg225"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
/* Position icons into sircle */
.circle-container {
position: relative;
width: 35em;
height: 35em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: none;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
width: 6em; height: 6em;
margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img {
display: block; width: 100%;
}
.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }
.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
</span>
<span data-scrollreveal="enter left, wait 2.2s">
<a href="#" class="deg315"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
</span>
</div>
</div><!--end circle-container-->
</div>
这个 div 的 CSS：
/* Position icons into sircle */
.circle-container {
position: relative;
width: 35em;
height: 35em;
padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: none;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
width: 6em; height: 6em;
margin: -2em; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img {
display: block; width: 100%;
}
.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }
.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
我想将我的图像包裹在 div 中并将它们定位成圆形，以便它们变得响应。
这可能吗？
请帮忙。 坦克你。
我在这个项目中使用 bootstrap 和 html5boilerplate。
我需要把它变成responsive.，在较小的视口上它看起来像这样
【问题讨论】：
-
能否详细说明“响应式”
-
想让它响应较小的视口、移动设备、平板电脑、平板电脑等。
-
你能在这里重现你的问题吗jsfiddle.net
-
我已经编辑了我的问题，你有两张图片，一张用于桌面版，一张用于较小的视口
-
我会尝试提出建议，但需要一些时间..
标签： javascript jquery html css twitter-bootstrap