html - 添加圆圈并使用 Bootstrap 创建这样的 UI？

Question

我是 bootstrap 的新手。 我必须使用 Bootstrap 在两个 div 之间添加圆圈。 我为此添加了 html，但它对我不起作用。 所以，请帮我找到解决方案。 谢谢

<div class="row">
    <div class="col-md-12" style="background-color:pink;height:74px;"></div>
</div>

<div class="blue-cirle-div"><img src="./images/donald.jpg" class="img-circle" width="75" height="75" /></div>
<div class="row">
    <div class="col-md-12" style="background-color:yellow;height:74px;"></div>
</div>

Answer 1

保持你的标记不变，这里有一个建议，使用 position: relative/z-index: 1 将它移动到顶部并给它一个 width/margin 使其居中 auto 并让上面/下面的元素靠近 -20px

.blue-cirle-div {
  position: relative;
  width: 74px;
  height: 74px;
  margin: -20px auto;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid blue;
}
.center-children {
  padding-top: 40px;
  text-align: center;
}
.photos {
  margin-right: 40px;
}
.photos ~ .photos {
  margin-right: 0px;
  margin-left: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-12" style="background-color:pink;height:74px;"></div>
</div>

<div class="blue-cirle-div">
  <img src="http://placehold.it/72" class="img-circle" width="72" height="72" />
</div>

<div class="row">
  <div class="col-md-12 center-children" style="background-color:yellow;height:74px;">

    <img src="http://placehold.it/120" class="photos" />
    <img src="http://placehold.it/120" class="photos" />

  </div>
</div>