class col xs 12里面加完col-xs-6后面col-md-3是什么意思

来源：蜘蛛抓取(WebSpider) 时间：2017-10-29 04:47 标签： class col xs 2
bootstrap -- 一个标签中，同时有 col-xs , col-sm , col-md , col-lg
时间： 16:04:18
&&&& 阅读：642
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&.col-xs- 超小屏幕 手机 (&768px)
.col-sm- 小屏幕 平板 (&768px)
.col-md- 中等屏幕 桌面显示器 (&992px)
.col-lg- 大屏幕 大桌面显示器 (&1200px)
HTML代码：
&div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"&
当屏幕尺寸
小于 768px 的时候，用 col-xs-12 类对应的样式；
在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；
在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；
大于 1200px 的时候，用 col-lg-3 类对应的样式；标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/jimcsharp/p/5859471.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！博客分类：
横向：外部div调用row然后里面每张图片创建一个div然后运用栅格，之后里面&a（thumbnail）&&img&
普通:四张图
&div class="row"&
& &div class="col-xs-6 col-md-3"&
&&& &a href="#" class="thumbnail"&
&&&&& &img src="..." alt="..."&
&&& &/a&
& &/div&
& ...
&/div&
图片下面有按钮和文本则把a换成div(thumbnail)然后里面div是调用caption然后添加&h3&&p&
&div class="row"&
& &div class="col-sm-6 col-md-4"&
&&& &div class="thumbnail"&
&&&&& &img src="..." alt="..."&
&&&&& &div class="caption"&
&&&&&&& &h3&Thumbnail label&/h3&
&&&&&&& &p&...&/p&
&&&&&&& &p&&a href="#" class="btn btn-primary" role="button"&Button&/a& &a href="#" class="btn btn-default" role="button"&Button&/a&&/p&
&&&&& &/div&
&&& &/div&
& &/div&
&/div&
Herman威锋
浏览: 3242 次
来自: 广州
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'请问有没有人用bootstrap，为什么bootstrap的栅格布局不能自动识别ＰＣ端的ＣＳＳ？-CSDN论坛
请问有没有人用bootstrap，为什么bootstrap的栅格布局不能自动识别ＰＣ端的ＣＳＳ？
&!DOCTYPE&html&
&!DOCTYPE&html&
&html&lang="zh-CN"&
&meta&charset="utf-8"&/&
&title&&/title&
&meta&name="viewport"&content="width=device-width,&initial-scale=1.0,&minimum-scale=1.0,&maximum-scale=1.0,&user-scalable=no"&/&
&link&rel="stylesheet"&type="text/css"&href="css/bootstrap.css"&/&
&script&type="text/javascript"&src="js/jquery-1.9.1.js"&&/script&
&script&type="text/javascript"&src="js/bootstrap.js"&&/script&
&link&rel="stylesheet"&type="text/css"&href="css/normalize.css"&/&
&style&type="text/css"&
.col-xs-6&{
background-color:red
.col-xs-4&{
background-color:cyan
.col-xs-7&{
background-color:blue
.col-xs-5&{
background-color:pink
@media&(min-width:&@screen-md-min)&{
.col-md-8&{
background-color:green
.col-md-4&{
background-color:yellow
.col-md-5&{
background-color:black
&div&class="container"&
&div&class="row"&
&div&class="col-xs-7&col-md-8"&.col-xs-7&.col-md-8&/div&
&div&class="col-xs-5&col-md-5"&.col-xs-5&.col-md-5&/div&
&div&class="row"&
&&&div&class="col-xs-4&col-md-4"&.col-xs-4&.col-md-4&/div&
&&&div&class="col-xs-4&col-md-4"&.col-xs-4&.col-md-4&/div&
&&&div&class="col-xs-4&col-md-4"&.col-xs-4&.col-md-4&/div&
&div&class="row"&
&&&div&class="col-xs-6"&.col-xs-6&/div&
&&&div&class="col-xs-6"&.col-xs-6&/div&
移动端执行col-xs-*没有问题，但ＰＣ端执行col-md-8时@media&(min-width:&@screen-md-min)&这个有问题，不会改变颜色。但布局是没有问题的。
为什么不能改变颜色？
这个支持pc端吗？
引用&1&楼&robertzh123&的回复:这个支持pc端吗？
换浏览器试一试
支持ＰＣ端啊，@media&(min-width:&@screen-md-min)这个里面就是ＰＣ端的，但我用ie,&firefox,&chrome&包括android的自带浏览器横着测试也是不会自动变颜色的。为什么会这样？我是不是写错了什么？不过我是按照bootstrap官网上说的写的喔……
优先级够不够&&加个&!important
加!important？什么意思？为什么要加这个
@media&(min-width:&@screen-md-min)&{
&&&&&&&&&&&&&&&&.col-md-8&{
&&&&&&&&&&&&&&&&&&&&background-color:green
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&.col-md-4&{
&&&&&&&&&&&&&&&&&&&&background-color:yellow
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&.col-md-5&{
&&&&&&&&&&&&&&&&&&&&background-color:black
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
里面既然都是col-md-*,那你完全可以将min-width:&@screen-md-min这个改成min-width:&992px啊~况且媒体查询里面一般不会用&@screen-md-min这样的样式的，都直接用具体的数字，除非你自己基于Less去个性化定制。在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
bootstrap中col-xs-* 和 col-md-* 和col-sm-*这几个类是干嘛的啊？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
.col-xs- 超小屏幕 手机 (&768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
控制栏格占的多少。推荐资料：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
栅格，是给div做宽度的。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：

我要回帖

更多关于 class col xs 2 的文章

 

随机推荐