Bootstrap列缩放
Bootstrap提供了一个网格布局，按照％将屏幕分为若干列。 据我所知，根据这一点：
col-lg指大型桌面col-md指桌面col-sm指平板电脑col-xs指电话
我正在用这个简单的程序测试这些类的功能：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
div {
height: 20px;
}
.col-md-3 {
background-color: black;
}
.col-md-6 {
background-color: yellow;
}
.col-sm-2 {
background-color: green;
}
.col-sm-8 {
background-color: blue;
}
.col-xs-1 {
background-color: violet;
}
.col-xs-10 {
background-color: red;
}
</style>
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-2 col-xs-1"></div>
<div class="col-md-6 col-sm-8 col-xs-10"></div>
<div class="col-md-3 col-sm-2 col-xs-1"></div>
</div>
</div>
</body>
</html>
我期望的是当我缩小屏幕尺寸时，颜色应该从黑色和黄色 - >绿色和蓝色 - >紫色和红色。 但它总是紫罗兰色和红色，如果我删除了col-xs，它会响应下一个较小的尺寸，它们是绿色和蓝色等等。
为什么这会发生任何想法？ 我在这里错过了任何信息吗？
你的逻辑是有缺陷的。 所有这些类都始终存在于文档中，因此无论屏幕大小如何，CSS选择器的特性都可以一致地应用。 您需要查看媒体查询以控制各种屏幕断点处的样式：
.row > div {
background: lightgreen;
}
@media (min-width: 768px) {
.row > div {
background: pink;
}
}
@media (min-width: 960px) {
.row > div {
background: lightblue;
}
}
@media (min-width: 1200px) {
.row > div {
background: lightyellow;
}
}
演示
我用过的断点与Bootstrap的一致。 您也可以使用自定义选择器将颜色应用于单个列。
链接地址: http://www.djcxy.com/p/75971.html