Bootstrap 3 图像显示答案

【问题标题】：Bootstrap 3 image displayingBootstrap 3 图像显示
【发布时间】：2015-03-21 09:21:15
【问题描述】：

您好，我对 css 和 javascript 有疑问，这里是图片链接 http://personal.crocodoc.com/YvRh8Hd

我想做的是在大圆圈周围放置较小的圆圈。我正在使用 bootstrap 3，并希望保持对圈子的响应能力。进行定位的最佳方法是什么？我要的简单方法是在 css 位置定义

.one {
    left: 260px;
    top: -30px;
}

.two {
    top: 50px;
    left: 310px;
}

.three {
    right: -100px;
    top: 140px;
}

问题是当我将浏览器调整为更小（以适合平板电脑屏幕或手机）时，圆圈相互悬停，它们应该垂直定位。谢谢你的回答。

【问题讨论】：

标签： javascript twitter-bootstrap-3 responsive-design geometry css-position

【解决方案1】：

不是一门精确的科学，但您可以使用 css 媒体查询来调整各种屏幕尺寸以重新定位。

类似这样的：

@media (min-width: 600px) {
  .one {
    left: @left;
    top: -@top;
  }
}

@media (max-width: 599px) and (min-width: 300px) {
  .one {
    left: @left/2;
    top: -@top/2;
  }
}

如果您要重新编译引导程序的 LESS，那么它们会预先定义屏幕尺寸： @screen-xs、@screen-sm、@screen-md、@screen-lg

我使用变量来建议您使用一半的左/上尺寸。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：