bootstrap v5
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 的 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet" >
<!-- <link rel="stylesheet" href="css/index.css"> -->
</div>
<title></title>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main d-flex flex-row justify-content-between ">
<!-- d-none d-md-block -->
<!-- <div class="f-item d-sm-none d-md-block">item1</div> -->
<div class="f-item d-none d-md-block"></div>
<div class="f-item flex-fill d-md-block"></div>
<!-- <div class="f-item d-sm-none d-md-block">item3</div> -->
<div class="f-item d-none d-md-block"></div>
</div>
<div class="footer"></div>
</div>
<style>
*{
padding: 0;
margin: 0;
}
.header{
background-color:red;
height: 100px;
}
.footer{
background-color: yellow;
height: 60px;
}
.main{
background-color: blue;
border: black 1px solid;
height: 200px;
}
.main>.f-item{
width: 60px;
border: purple 1px solid;
}
</style>
<script src="js/bootstrap.bundle.min.js" ></script>
<!-- 选项 2:Popper 和 Bootstrap 的 JS 插件各自独立 -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
-->
</body>
</html>
运行结果