bootstrap V3 做一个宽高100% 的网格
时间: 2023-10-07 15:14:15 浏览: 76
Bootstrap3DesignTwo:Bootstrap v3制作的设计
可以使用以下代码实现:
```
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Grid - 100% width and height</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.row100{
height: 100vh;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row row100">
<div class="col-md-6 col-sm-6 col-xs-6" style="background-color: #f5f5f5;">
Content 1
</div>
<div class="col-md-6 col-sm-6 col-xs-6" style="background-color: #dcdcdc;">
Content 2
</div>
</div>
</div>
</body>
</html>
```
在这个例子中,我们使用了 `height: 100vh` 来让 `row` 与 `container` 占满整个视口。注意这只适用于支持 `vh` (viewport height) 单位的浏览器。同时,我们使用了 Bootstrap 的栅格系统来创建两个等宽的列,其中一个背景颜色为 #f5f5f5,另一个背景颜色为 #dcdcdc。
阅读全文