添加圆圈并使用 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

你可以这样做：

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

这是它的图片：

Answer 2

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

<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这里-

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

Answer 3

保持你的标记不变，这里有一个建议，使用 position: relative / z-index: 1 将它移到顶部并给它一个 width / margin 居中它 auto 并让 above/below 元素靠近 -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>

添加圆圈并使用 Bootstrap 创建 UI？

Add circle and to create UI like this using Bootstrap?

html

css

twitter-bootstrap

angular-ui-bootstrap