如何在展示用户信息的Bootstrap box组件中正确定位3张并排圆形图片

• 正在开发展示用户信息的box组件，需要实现活动说明下方3个小圆形图片的定位效果，用于为用户提供更多操作选项
• 预期效果如下图：
  

CSS代码 #

.box.box-success {
    border-top-color: #00a65a;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.actividades {
    padding-right: 80px;
    text-align: right;
    font-size: 18px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #5D6168;
    font-weight: bold;
}

.profile-user-img {
    padding: 3px;
    border: 3px solid #d2d6de;
}

.img-circle {
    border-radius: 50%;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: middle;
}

.datosGenerales {
    font-family: 'Gill Sans', 'Gill Sans MT';
    text-align: center;
    color: #5D6168;
    font-weight: bold;
}

h2 {
    font-size: 20px;
}

.puesto {
    font-size: 14px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #5D6168;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="box box-success">
    <div class="box-body">
        <div class="actividades">Activity</div>
        <div class="box-body box-profile">
            <img class="profile-user-img img-responsive img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"> 
            <div class="col-xs-7 col-lg-7 text">
                <div style="display:inline-block; text-align: left;" >
                    <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1>
                </div>
                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4">Blank</div>
                <br>
                <div style="display:inline-block; " >
                    <h1><img class="profile-user-img img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1>
                </div>
                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Blank</div>
                <br>
                <div style="display:inline-block; " >
                    <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1>
                </div>
                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Blank</div>
            </div>  
        </div>
        <h2 class="datosGenerales">Name</h2>
        <div class="puesto">Description</div>
    </div>
    <!-- /.box-body -->
</div>

现有代码存在冗余嵌套、布局逻辑不清晰的问题，按以下步骤修改即可达到预期效果：

1. 新增以下CSS样式，用flex布局实现元素对齐，不需要冗余行内样式：

/* 大头像和右侧操作区水平排列 */
.box-profile {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 0;
}
/* 固定大头像尺寸 */
.profile-user-img.img-responsive {
  width: 100px;
  margin: 0;
}
/* 右侧操作列表垂直排列 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 单个操作项内部水平对齐 */
.activity-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.activity-item .profile-user-img {
  width: 60px;
  margin: 0;
}
.activity-text {
  font-size: 18px;
  color: blue;
}

2. 替换原有box-profile区块的HTML代码，清理冗余的h1嵌套、br标签和行内样式：

<div class="box-body box-profile">
  <img class="profile-user-img img-responsive img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"> 
  <div class="activity-list">
    <div class="activity-item">
      <img class="profile-user-img img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture">
      <span class="activity-text">Blank</span>
    </div>
    <div class="activity-item">
      <img class="profile-user-img img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture">
      <span class="activity-text">Blank</span>
    </div>
    <div class="activity-item">
      <img class="profile-user-img img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture">
      <span class="activity-text">Blank</span>
    </div>
  </div>
</div>

修改后即可实现左侧大头像、右侧垂直对齐三个小头像加文本的预期布局，适配不同屏幕尺寸时也不会出现错位问题。

内容的提问来源于stack exchange，提问作者user15500092