bootstrap中如何把row等分成5分,手机屏又恢复为每行一份

小小7 发布于 2016/09/21 20:40
阅读 3K+
收藏 1

在pc上把row分成5份,手机屏在恢复为col-xs-12,怎么弄?

我分成5份后,手机屏还是5份,烦啊,

求大神指教

加载中
0
大止刀口
大止刀口

你看下官网的文档http://getbootstrap.com/css/#grid

大致上就是col-m-n来影响不同屏幕大小时,元素占的大小。

其中m可以是sm,xs,md,lg来表示该样式在什么屏幕优先使用,

n是1-12的数值来表示占行的十二分之几。

0
郝立超
在col的class里写入“col-sm-1 col-xs-12”,col-xs-12可以忽略不写。
0
李国师

bootstrap的栅格样式是12等分的,如果要求等分为5份的代码,应该写在媒体查询里

例如:


@media only screen and (min-width:415px){
.myui-col-pc-1{
width:20%;
}
.myui-col-pc-2{
width:40%;
}
.myui-col-pc-3{
width:60%;
}
.myui-col-pc-4{
width:80%;
}
.myui-col-pc-5{
width:100%;
}
}




以上的415px是依据iphone6 plus的尺寸设置的,可自行调整

在标签中应该这样写:

<div class="col-xs-12 myui-col-pc-1"></div>
<div class="col-xs-12 myui-col-pc-4"></div>



0
西域大都护
西域大都护
<!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>



粘贴过去直接运行即可

返回顶部
顶部