欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

bootstrap中如何把row等分成5分,手机屏又恢复为每行一份 10等份 10等分 十等分 五等分 5等份 有大用

破译“粽”子代码,拿最高悬赏!>>>   

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

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

求大神指教

 
 
共有4个答案 最后回答: 8个月前

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>

 

 

 

 
<!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>

 

 

粘贴过去直接运行即可

来自 https://www.oschina.net/question/2916488_2198222?fromerr=aBIhudjL


普通分类: