如何使用css / bootstrap将圆圈放在圆圈中？

Question

我想知道如何在一个圆圈内定位圆圈/图像。 我已经尝试将它们放在一个容器中并围绕一个圆圈旋转它们，但我无法弄清楚如何使它像下面的图像：

 .deg1 { transform: rotate(270deg) translate(6em) rotate(-270deg); top: 50px; position: relative; } /* 1 */ .deg2 { transform: translate(6em); } /* 2 */ .deg3 { transform: rotate(45deg) translate(6em) rotate(-45deg); } /* 3 */ .deg4 { transform: rotate(135deg) translate(6em) rotate(-135deg); } /* 4 */ .deg5 { transform: translate(-6em); } /* 5 */ .deg6 { transform: rotate(225deg) translate(6em) rotate(-225deg); } /* 6 */ .circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; border-radius: 50%; margin: 1.75em auto 0; } .circle-container a { display: block; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; } img { border-radius: 400px; width: 100px; } 

 <div class='circle-container'> <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> </div> 

首先，我尝试搜索bootstrap的文档以寻找可以提供帮助的内容，因此我只是这样做而无法弄明白。

Answer 1

我使用Javascript / jquery来设置每个外圈的位置。

Jquery从ThiefMaster♦无耻地偷走了他们在这个Q＆A的回答

 var radius = 50; // adjust to move out items in and out var fields = $('.container div'), container = $('.container'), width = container.width(), height = container.height(); var angle = 0, step = (2 * Math.PI) / fields.length; fields.each(function() { var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2); var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2); if (window.console) { console.log($(this).text(), x, y); } $(this).css({ left: x + 'px', top: y + 'px' }); angle += step; }); 

 * { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } body { display: flex; height: 100vh; overflow:hidden; } .container { width: 50px; height: 50px; margin: auto; position: relative; border-radius: 50%; border: 1px solid grey; background: #f00; animation: spin 3s infinite linear } .container div { position: absolute; width: 50px; height: 50px; background: #000; border-radius: 50%; } .container div:first-child { background: blue; } @keyframes spin { 100% { transform: rotate(1turn) } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 2

如果没有translate和transform ，您甚至可以使用top ， left ，“底部”和“右侧”进行定位。

确保使用px因为如果使用%值，它将会中断。

您需要根据您的图像进行一些修改。

 // .deg1 { // transform: rotate(270deg) translate(6em) rotate(-270deg); // } /* 1 */ // .deg2 { // transform: translate(6em); // } /* 2 */ // .deg3 { // transform: rotate(45deg) translate(6em) rotate(-45deg); // } /* 3 */ // .deg4 { // transform: rotate(135deg) translate(6em) rotate(-135deg); // } /* 4 */ // .deg5 { // transform: translate(-6em); // } /* 5 */ // .deg6 { // transform: rotate(225deg) translate(6em) rotate(-225deg); // } /* 6 */ .circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; border-radius: 50%; margin: 1.75em auto 0; } .circle-container a { display: block; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; } img { border-radius: 400px; width: 100px; } .center img {} .deg1 img { position: relative; top: 100px; } .deg2 img { position: relative; bottom: 100px; } .deg3 img { position: relative; top: 50px; left: 85px; } .deg4 img { position: relative; top: 50px; right: 85px; } .deg5 img { position: relative; bottom: 50px; right: 85px; } .deg6 img { position: relative; bottom: 50px; left: 85px; } 

 <div class='circle-container'> <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a> </div> 

Answer 3

您可以使用CSS来定位元素。 例如，这是使用CSS网格的示例。

我已经将网格声明为6行乘6列，以便定位元素，使角落为空。

 .circle-container { width: 24em; height: 24em; border-radius: 50%; border:2px solid red; display:grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); } .circle-container a { display: block; border:2px solid grey; background:white; border-radius:50%; text-align:center; } .deg1 {grid-column:3 / span 2; grid-row: 1 /span 2} /* 1 */ .deg2 {grid-column:1 / span 2; grid-row: 2 /span 2} /* 2 */ .deg3 {grid-column:5 / span 2; grid-row: 2 /span 2} /* 3 */ .deg4 {grid-column:3 / span 2; grid-row: 3 /span 2} /* 4 */ .deg5 {grid-column:1 / span 2; grid-row: 4 /span 2} /* 5 */ .deg6 {grid-column:5 / span 2; grid-row: 4 /span 2} /* 6 */ .deg7 {grid-column:3 / span 2; grid-row: 5 /span 2} /* 7 */ /*bring the lateral circles closer to the center*/ .deg2, .deg5{margin:0 -1em 0 1em;} .deg3, .deg6{margin: 0 1em 0 -1em} body{ background:steelblue; } 

 <div class='circle-container'> <a href='#' class='deg1'>1</a> <a href='#' class='deg2'>2</a> <a href='#' class='deg3'>3</a> <a href='#' class='deg4'>4</a> <a href='#' class='deg5'>5</a> <a href='#' class='deg6'>6</a> <a href='#' class='deg7'>7</a> </div> 

如果您不想使用CSS网格（可能是因为IE11），您也可以使用您喜欢的任何类似网格的技术，可能是浮点数，内联块，甚至是flexbox，将元素放在三行中并按下在一边。

这里有display：inline-block，通常会返回

123
456
7

和一些变换来弥补这一点

 .circle-container { width: 240px; height: 240px; border:2px solid red; font-size:0;/*typical inline-block whitespace hack*/ border-radius:50%; } .circle-container a { display:inline-block; width:calc(100% / 3); height:calc(100% / 3); border:2px solid grey; background:white; text-align:center; font-size:1rem; border-radius:50%; } .deg1, .deg3, .deg4, .deg6{ transform:translateY(50%); } .deg7{ transform:translateX(100%) } body{ background:steelblue; } *{box-sizing:border-box; margin:0; padding:0;} 

 <div class='circle-container'> <a href='#' class='deg1'>1</a> <a href='#' class='deg2'>2</a> <a href='#' class='deg3'>3</a> <a href='#' class='deg4'>4</a> <a href='#' class='deg5'>5</a> <a href='#' class='deg6'>6</a> <a href='#' class='deg7'>7</a> </div> 

Answer 4

你可以尝试调整一些边距和容器的宽度，然后不需要复杂变换：

 .circle-container { position: relative; width: 12em; height: 12em; border:1px solid; border-radius: 50%; margin: 0.75em auto 0; transform:rotate(90deg); } .circle-container a { display: inline-block; width: 4em; height: 4em; border-radius: 50%; background: blue; margin:-0.3em -0.1em; } a:first-child, a:nth-child(6) { margin-left:2em; } a:nth-child(1),a:nth-child(2) { margin-top:0.3em; } 

 <div class='circle-container'> <a href='#'></a> <a href='#'></a> <a href='#'></a> <a href='#'></a> <a href='#'></a> <a href='#'></a> <a href='#'></a> </div>