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

Question

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

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

求大神指教

Answer 1

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>

Answer 2

在col的class里写入“col-sm-1 col-xs-12”,col-xs-12可以忽略不写。

Answer 3

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

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

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

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