61,112
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
古丽扎娜 2016-10-07
- 打赏
- 举报
bootstrap实现pc屏幕五等分
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>屏幕五等分</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
@media (min-width: 1200px) {
.col-zdlg-2-5{
float: left;
width:20%;
}
}
h2{
font-family: "Microsoft Yahei";
font-weight: 500;
line-height: 1.1;
color:#000;
}
.col-red-border{
border:1px solid red;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
</div>
</div>
</body>
</html>
奔跑的小哥 2015-07-08
- 打赏
- 举报
我就想要个5等分 看来实现不了了
滴滴月空雨 2015-07-08
- 打赏
- 举报
自己改一下代码
qq_15153307 2015-07-02
- 打赏
- 举报
不是啊，只要加起来等于12就行了
比如2+2+2+2+6
比如1+1+1+1+8
这些都可以是5格，只是不管怎么样是不能5等分的
ningyb 2015-07-02
- 打赏
- 举报
是呀奔跑的小哥 2015-07-01
- 打赏
- 举报
