Bootstrap 3将元素对齐成圆圈

Question

我有一个关于形成元素以形成圆形的问题,或者将元素对齐以形成圆形,这取决于您喜欢它的发音方式,现在又回到了问题:

关于这个问题,这里有关于stackoverflow和互联网的几个例子,但是这些例子中的任何一个都不包括Bootstrap 3响应对齐元素以形成一个圆圈,我想如果有人可以做一个例子,我的工作JSFiddle示例(文本需要成为圆的中心,因为我需要为它设置动画),并使用自举网格系统来实现.

这有可能吗,你可以向我解释你是如何做到这一点所以我可以从中学到一些东西.

Answer 1

TL; DR; http://jsfiddle.net/k7yxtpc7/

编辑(很长？)解释:

所以我们从bootstrap的层次结构开始:

<div class="container-fluid">
    <div class="row">
         <div class="circle_container col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12">
         </div>
     </div>
</div>

图像的行星将被放入其中.circle_container.我们的目标是确保整个圆圈响应.circle_container宽度变化并正确适应.这样Boostrap对容器的任何改变都将反映在圆圈本身上,使其符合Bootstrap.

首先我们要做好准备.circle_container.因为它是一个整圆,所以容器必须是方形的.我们必须找到一种方法使.circle_container高度始终等于其宽度.我这样做是通过在里面放一个方形img .circle_container,然后根据容器的宽度缩放img的大小:

<div class="circle_container ...">
    <img class="transparent_square" src="http://i.stack.imgur.com/5Y4F4.jpg" width="2" height="2" />
</div>

.transparent_square{
    width: 100%;
    height: auto;
}

注意:我在网上找不到透明的方形图像,所以我不得不用白色方块做.在您的产品2pxX 2px透明图像是最好的.

太好了,现在我们有一个方形容器.但我们也限制了自己.从现在开始,img必须是.circle_container具有静态(默认)或相对位置的唯一孩子,因为任何进一步的孩子都会扩展容器,破坏方形.不过没什么大不了的,因为absolute无论如何我们都会定位其他孩子.

接下来是中心文本泡泡:

<div class="central_text text-center">
    <h3>Special for you</h3>
    <h5>Lorem ipsum</h5>
</div>

.central_text{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

翻译技巧利用了css变换中的百分位值使用元素的预渲染宽度和高度这一事实,而所有其他定位规则使用其父级的宽度和高度.通过给出元素,left: 50%; top: 50%我们将其左上角放在其父元素的中心,然后我们将其向上和向左平移50%的宽度和高度,有效地将元素置于其父元素中.这只是将一个元素置于容器中心的几种方法中的一种,但它最适合我们的情况,因为元素是absolutely定位的.

最后,我们到达了创建圆的部分.总结一下这里的技巧:我们将实际图像放在一个容器中,该容器在容器的中心有一个枢轴点,并将图像放置在容器的一侧,等于圆的半径.这样,当我们旋转图像的容器时,图像将围绕容器的中心移动一圈,就像绘图罗盘一样.在图像到达我们想要的位置之后,我们在另一个方向上旋转图像本身相同的度数以补偿方向的倾斜,使图像再次竖直.

容器和图像:

<div class="moon_container moon1"><img class="moon moon1" src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png"></div>
.moon_container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 20%; /* This is the final width of the image */
}

我将宽度设置为宽度的.moon_container20%.circle_container.这将是我们最后一个圆圈中图像的宽度.增加或减少此数字只会根据需要更改图像的大小.

现在要从容器中偏移图像:

.moon{
    width: 100%;
    height: auto;

    /* The image can be relative positioned without breaking anything because its parent is absolute */
    position: relative;

    /* The radius of the circle. This is equal to 175%*20% = 35% of .circle_container's width */
    left: 175%;
}

请注意,CSS left使用元素的直接父级宽度作为基本单位.如果您.moon_container在上一部分中更改了宽度,则图像的实际距离也会发生变化.

最后,旋转(我moon2在这里使用,因为moon1不需要旋转):

/* Container rotate 45deg clockwise... */
.moon_container.moon2{
    /* 360/8 (the number of images) = 45deg */
    transform: translate(-50%, -50%) rotate(45deg);
}

/* ... while the image rotate 45deg counter-clockwise */
.moon.moon2{
    transform: rotate(-45deg);
}

为什么transform: translate(-50%, -50%) rotate(45deg);不transform: rotate(45deg);呢？因为我们transform: translate(-50%, -50%);之前宣布了.moon_container(定心技巧).如果我们只transform: rotate(45deg);在这里写,CSS解析器将覆盖以前的规则与新的规则,丢失translate部分.所以我们必须手动附加.

对所有8张图像重复此过程,我们就完成了!

如果您的图像数量不确定,只需使用javascript计算每个图像的旋转部分.

我希望我的解释对你有用.我一直不好解释......

编辑2: http ://jsfiddle.net/k7yxtpc7/3/根据OP的请求更改悬停版本的文本.这一部分只有一件事需要注意,那就是

$('body').on({ 
    mouseenter : function(event){
      ...
    }, 
      mouseleave : function(event){
      ...
    }
}, ".moon");

将所有事件绑定在"正文"或文档上是好习惯,而不是将它们绑定在实际元素本身上(.moon).这样你:

• 始终只为悬停事件使用1个事件监听器,而不是8个(您可以想象数字如何在实际产品上扩展).
• 稍后添加更多图像时,不必.moon再次将事件绑定到新图像上.

原答案:

由于要求相当模糊,我不知道我的解决方案是否会让您满意.我的解决方案基于3个假设:

• 图像的整个行星仅基于视口宽度,类似于Bootstrap处理其响应设计的方式.如果你想考虑视口高度,也许我可以想出另一个版本.
• 根据Bootstrap容器的宽度缩放图像,以确保有足够的空间显示所有图像.
• 排版使用Bootstrap的默认值.

该解决方案避免使用javascript,代价是无法即时添加/删除图像.如果您的意图是动态数量的图像,我将进行计算.

性感动画兼容.

不幸的是Bootstrap center-block只是水平居中一块,我不得不利用翻译技巧来固定枢轴点.

.central_text{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

这只是一个答案占位符.一旦我们得到满意的解决方案,我会写详细的解释.