添加圈子并使用Bootstrap创建像这样的UI？

Question

我是新手引导。 我必须使用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>

Answer 2

你可以做这样的：

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

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