添加圈子并使用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以使其居中{ {1}}并让上/下元素靠近auto

＆＃13;

＆＃13;

-20px

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：

＆＃13;

＆＃13;

<div class="row">
  <div class="col-md-5" style="background-color:pink;height:74px;"></div>
  <div class="col-md-2 text-center">
    <img src="http://placehold.it/75x75" alt="">
  </div>
  <div class="col-md-5" style="background-color:yellow;height:74px;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是它的图像：

Answer 3

这里是您所要求的设计。复制代码下方的粘贴，并根据您的需要调整其他内容。

<div class="row">
    <div class="col-md-12 heading" style="background-color:#ff4940;height:74px;">
    <h2>Some text</h2>
  </div>
</div>

<div class="blue-cirle-div">
   <h5 class="text-center">NY</h5>
</div>
<div class="row">
    <div class="col-md-12 middle" style="background-color:cyan;height:74px;">
  </div>
</div>
  <div class="box-container">
    <div class="box"></div>
    <div class="box"></div>

  </div>
  </body>

CSS Here -

body{
  overflow-x:hidden;
}
.heading{
  display: flex;
    justify-content: center;
    align-items: center;
}

h2{
color:white;
}
.blue-cirle-div{
  background: none repeat scroll 0 0 #fff;
  box-shadow:0 2px 5px rgba(0,0,0,0.16);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  width:50px;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 60px;
    vertical-align: middle;
    z-index:1;
}

.middle{
  margin-top:12px;
}

.box-container{
  display:flex;
  justify-content:center;
  align-self:center;
  width:100%;
}

.box{
  display: flex;
  justify-content:center;
  align-self:center;
  float:left;
    box-shadow:0 2px 5px rgba(0,0,0,0.16);
  margin: 0 15px;
  width:200px;
  height:200px;
  position:relative;
  top:-45px;
  background:lightblue;
}