Javascript 引导3将元素对齐成圆形

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

关于这个问题，在stackoverflow和internet上有几个例子，但这些例子中的任何例子都不包括引导3响应对齐元素以形成一个圆，我想如果有人能从我的工作示例中制作一个例子（文本需要是圆的中心，因为我需要为它设置动画），并使用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>

注意：我在网上找不到一个透明的正方形图像，所以我只能用一个白色的正方形来凑合。在您的产品中，透明图像是最好的

太好了，现在我们有一个方形容器。但我们也限制了自己。从现在起，

img

必须是

.circle\u container

中唯一具有静态（默认）或相对位置的子容器，因为任何进一步的子容器都将扩展容器，破坏方形形状。不过这没什么大不了的，因为我们会把其他孩子定位为绝对的

接下来是中心文本气泡：

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

我将

.moon\u container

的宽度设置为

.circle\u container

宽度的20%。这将是我们最后一个圆圈中图像的宽度。增加或减少此数字只需根据您的需要更改图像的大小

现在，要将图像从其容器中偏移，请执行以下操作：

.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的左

使用元素的直接父元素的宽度作为基本单位。如果在上一部分中更改了
.moon\u容器的宽度，则图像的实际距离也将更改

最后，旋转（我使用
moon2
作为示例，因为
moon1
不需要旋转）：

为什么
变换：平移（-50%，-50%）旋转（45度）和非
变换：旋转（45度）？因为我们声明了
transform:translate（-50%，-50%）用于
.moon\u容器
（定心技巧）。如果我们只写
变换：旋转（45度）
在这里，CSS解析器将用新规则覆盖以前的规则，从而丢失
翻译部分。因此，我们必须手动追加

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

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

我希望我的解释对你有用。我一直不善于解释

编辑2:根据OP的请求更改悬停版本的文本。这部分只有一件事需要注意，那就是

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

绑定“body”或文档上的所有事件是一个好习惯，而不是将它们绑定到实际的元素本身（the
.moon
）。这样你就：


对于悬停事件，始终只使用1个事件侦听器，而不是8个（您可以想象在实际产品上该数字是如何放大的）
以后添加更多图像时，不必再次将事件绑定到新的
.moon
上


原始答案：

由于要求很模糊，我不知道我的解决方案是否能满足您的要求。我的解决方案基于3个假设：


整个图像仅基于视图端口宽度，类似于Bootstrap处理其响应性设计的方式。如果你想把视角高度考虑进去，也许我可以想出另一个版本
图像根据引导容器的宽度进行缩放，以确保有足够的空间显示所有图像
排版使用引导的默认设置

该解决方案避免使用javascript，代价是无法动态添加/删除图像。如果你想要动态的图像数量，我会计算


不幸的是，Bootstrap的
中心块
只能水平居中一个块，我不得不利用translate技巧将轴心点居中

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

这只是一个答案占位符。一旦我们有了满意的解决方案，我会写详细的解释。
作为您的问题，您只需要文本对齐，是吗？使文本位于圆的中心，只需设置
transform:translateY（0%）在#middleBubbleText中没有关系，但是谢谢，我想和我的元素形成一个圆圈，我想使用引导网格系统来实现它。不在家的atm，会检查你的小提琴，谢谢你的回应。就是这样，我现在可以让它有回应了，未来更多我想动画中心切换和显示不同的文本时，你点击一个元素，感谢它现在已经很晚了，所以我想我必须得到一些睡眠（否则我会迟到的工作，再次）。我会在大约10小时内更新答案并解释。谢谢你，去睡觉吧，好好享受。好了，就这样。我已经用解释更新了答案。希望对您有所帮助。
/* 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);
}

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

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