极客观点
项目管理
HarmonyOS
浏览器放至最大显示没有问题，但是改变浏览器窗口大小，出现混乱
截图如下，出现堆叠：
希望达到的效果如下：
代码：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="deviceData.css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row">
<div class="col" id="a3">首页</div>
<img class="col" id="a_1" src="images/数据管理平台/u38.png">
<div class="col" id="a4">问题</div>
<img class="col" id="a_2" src="images/数据管理平台/u38.png">
<div class="col" id="a5">专栏</div>
<img class="col" id="a_3" src="images/数据管理平台/u38.png">
<div class="col" id="a6">用户</div>
<img class="col" id="a_4" src="images/数据管理平台/u38.png">
<div class="col" id="a7">特色</div>
<img class="col" id="a_5" src="images/数据管理平台/u38.png">
<div class="col" id="a8">在线客服</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
css
.row {
background-color: rgba(51, 51, 51, 1);
height: 60px;
width: inherit;
box-shadow: 0 5px black inset;
}
#a1 {
position: absolute;
height: 64px;
width: 172px;
margin-left: 60px;
margin-top: 3px;
}
#a2 {
color: white;
font-size: 28px;
font-weight: bold;
margin-top: 15px;
margin-left: 240px;
position: absolute;
}
#a3,#a4,#a5,#a6,#a7,#a8 {
position: absolute;
color: white;
margin-top: 15px;
font-size: 18px;
float: none;
}
#a3 { color: #FFCC00; margin-left: 55%; }
#a4 { margin-left: 61%; }
#a5 { margin-left: 65%; }
#a6 { margin-left: 71%; }
#a7 { margin-left: 79%; }
#a8 { margin-left: 85%; }
#a_1,#a_2,#a_3,#a_4,#a_5,#a_6 {
position: absolute;
color: white;
margin-top: 15px;
}
#a_1 { margin-left: 60%; }
#a_2 { margin-left: 64%; }
#a_3 { margin-left: 70%; }
#a_4 { margin-left: 78%; }
`
麻烦大家帮我看看怎么实现？谢谢
html5
既然引用了bootstrap就可以给div和img加个类啊，class="col-sm-1"，这样就是响应式布局，缩小还能保持良好的结构