使用Bootstrap创建一个容器,该容器占用导航栏底部和视图末尾之间的100%空间,可以通过以下步骤实现:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
JavaScript文件:<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Container Example</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<!-- 导航栏内容 -->
</nav>
<!-- 容器 -->
<div class="container-fluid">
<!-- 视图内容 -->
</div>
<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
这样,容器就会占用导航栏底部和视图末尾之间的100%空间。你可以根据具体需求自定义导航栏和容器的样式,以及在容器中添加任意的HTML内容。
注意:以上代码示例中使用的是Bootstrap 5版本,如果你使用的是其他版本,请相应地调整引入的CSS和JavaScript文件链接。
领取专属 10元无门槛券
手把手带您无忧上云