如何调整Bootstrap布局下HTML图标与两个链接元素的排列样式

要实现图标在左、两个手机号码垂直排列在图标右侧的布局，你可以通过Flex布局调整结构和样式，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" >
<div class="col-md-6">
    <div class="box" style="display: flex; align-items: center; justify-content: flex-end; gap: 12px;">
        <i class="las la-phone-volume" style="font-size: 48px; color: #337ab7;"></i>
        <div class="phone-group">
            <a style="font-size: 20px; display: block;">111111111111</a>
            <a style="font-size: 20px; display: block;">33333333333333</a>
        </div>
    </div>
</div>
</html>

核心修改点 #

• 给外层.box容器添加Flex布局属性：display: flex开启弹性布局，align-items: center让图标和右侧手机号垂直居中对齐，justify-content: flex-end保持整个模块在col-md-6容器内右对齐，gap控制图标和文字组的间距
• 新增.phone-group容器包裹两个手机号链接，给链接添加display: block属性实现垂直排列
• 移除了冗余的align="right"、align-content: right无效属性

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