我正在尝试如下布局：
Here is what i tried doing to achieve same
我不知道如何在引导程序中将蓝色圆圈与圆形图像对齐并将文本放在行的顶部，例如。虚线上方的“您的客户”。
【问题讨论】：
标签： html css twitter-bootstrap user-interface bootstrap-4
我已经使用伪元素来实现它。请参考以下链接。谢谢
【讨论】：
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
.section-header, .steps-header, .steps-name {
color: #3498db;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(255, 0, 0, 0);
}
.step-box {
position: relative;
}
.border-info {
position: absolute;
top: -12px;
right: -41%;
}
@media screen and (max-width: 500px) {
.steps-timeline {
border-left: 2px solid #3498db;
margin-left: 25px;
}
}
@media screen and (min-width: 500px) {
.steps-timeline {
border-top: 2px solid #3498db;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
}
.steps-timeline:after {
content: "";
display: table;
clear: both;
}
.steps-one, .steps-two, .steps-three {
outline: 1px dashed rgba(0, 128, 0, 0);
}
@media screen and (max-width: 500px) {
.steps-one, .steps-two, .steps-three {
margin-left: -25px;
}
}
@media screen and (min-width: 500px) {
.steps-one, .steps-two, .steps-three {
float: left;
width: 33%;
margin-top: -50px;
}
}
@media screen and (max-width: 500px) {
.steps-one, .steps-two {
padding-bottom: 40px;
}
}
@media screen and (min-width: 500px) {
.steps-one {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
@media screen and (max-width: 500px) {
.steps-three {
margin-bottom: -100%;
}
}
@media screen and (min-width: 500px) {
.steps-three {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #3498db;
}
@media screen and (max-width: 500px) {
.steps-img {
float: left;
margin-right: 20px;
}
}
.steps-name, .steps-description {
margin: 0;
}
@media screen and (min-width: 500px) {
.steps-name {
text-align: center;
}
}
.steps-description {
overflow: hidden;
}
@media screen and (min-width: 500px) {
.steps-description {
text-align: center;
}
} <!-- STEPS -->
<section id="Steps" class="steps-section">
<div class="steps-timeline">
<div class="steps-one step-box">
<img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
<h3 class="steps-name">
John Doe
</h3>
<p class="steps-description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</p>
<div class="border-info">
<p>Your Customer</p>
</div>
</div>
<div class="steps-two step-box">
<img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
<h3 class="steps-name">
John Doe
</h3>
<p class="steps-description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</p>
<div class="border-info">
<p>Your Customer</p>
</div>
</div>
<div class="steps-three step-box">
<img class="steps-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyznUM3fo7JW5RskOyxZqC0sGMtn6AdNB8Y3lVey8cdfl0ZnmW" alt="" />
<h3 class="steps-name">
John Doe
</h3>
<p class="steps-description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
</p>
</div>
</div><!-- /.steps-timeline -->
</section>【讨论】：
试试这个：
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#dotted::after{
content: "------------------------------";
letter-spacing: 2px;
color:#2518A5;
}
</style>
<div class="col mini-box ml-4" >
<div class="row" style="position: relative !important; width: 1000px;">
<div style="display: inline">
<div id="dotted"><img class="rounded pull-right" src="assets/ic_AvatarMale_2.svg" width="85" height="85"></img>
</div>
<div class="mt-2 text-left"><h6 style="font-weight: 700; color: #2518A5 ">John Doe (You)</h6>
<h6>Founder</h6>
<h6>ESOP International</h6>
</div>
</div>
<span style="text-align: center; font-size:10pt;position: absolute; right:750px; top: 10px; display: inline-block">Your Company</span>
<span style="position: absolute;text-align: center; font-size:10pt; right:370px; display: inline-block">Nathan was co founder & <br/>COO at HotelsByDay</span>
<div style="display: inline-block">
<div id="dotted"><img class="rounded pull-right" src="assets/ic_AvatarMale_1.svg" width="85" height="85"></img>
</div>
<div class="mt-2 "><h6 style="font-weight: 700; color: #2518A5 ">Paul Ironside</h6>
<h6>Co-founder and CEO</h6>
<h6>Commercial Tribe</h6>
</div>
</div>
<img class="rounded pull-right" src="assets/ic_AvatarMale_1.svg" width="85" height="85">
</div>
</div>【讨论】：