Bootstrap 中如何写含有4个列,每个列都与屏幕等高的页面?
具体的 html 与 css 该怎么写呢?
如图
试试这样呢~
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body,html,.row,.container-fluid{
height: 100%;
}
.one{
background-color: #452;
height: 100%;
}
.two{
background-color: #956;
height: 100%;
}
.three{
background-color: #034;
height: 100%;
}
.four{
background-color: #904;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 one">
1
</div>
<div class="col-sm-3 two">
2
</div>
<div class="col-sm-3 three">
3
</div>
<div class="col-sm-3 four">
4
</div>
</div>
</div>
</body>
</html>
实现的办法很多,例如使用css3中新的长度单位:vw
和vh
vw:相对于视窗的宽度,视窗宽度是100vw
vh:相对于视窗的高度,视窗高度是100vh
因此,4列,与窗口等高,每列的宽为25vw,高为100vh
使用 vw 与 vh 的 DEMO
当然,你也可以使用flexbox
来实现
使用flexbox的DEMO