我知道这确实是一个新手问题，但不知何故我无法弄清楚为什么下面的示例不起作用。这个想法是 Bootstrap 根据视口(viewport)大小应用不同的 css 规则。但是不知何故，Bootstrap 总是在样式注释中应用最新的 css 规则。无论视口(viewport)大小是 xs、sm、md 还是 lg。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- To ensure proper rendering and touch zooming,
add the viewport meta tag to your <head>. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap grid system</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<style>
.col-xs-12 {
background-color: #204d74;
font-size: 40px;
}
.col-sm-6 {
background-color: #449d44;
font-size: 30px;
}
.col-md-4 {
background-color: #ac2925;
font-size: 20px;
}
.col-lg-4 {
background-color: #ffff00;
font-size: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">.col-xs-12 .col-sm-6 .col-md-6 .col-lg-4. .col-xs-12 .col-sm-6 .col-md-6 .col-lg-4 col-xs-12 .col-sm-6 .col-md-6 .col-lg-4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">.col-xs-12 .col-sm-6 .col-md-6 .col-lg-4. .col-xs-12 .col-sm-6 .col-md-6 .col-lg-4 col-xs-12 .col-sm-6 .col-md-6 .col-lg-4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">.col-xs-12 .col-sm-6 .col-md-6 .col-lg-4. .col-xs-12 .col-sm-6 .col-md-6 .col-lg-4 col-xs-12 .col-sm-6 .col-md-6 .col-lg-4</div>
</div>
</div>
</body>
</html>最佳答案
请记住，这些类始终应用于每个 div(调整大小不会添加或删除类)，这意味着无论视口(viewport)大小如何，都将使用最近的一个。相反，您需要使用媒体查询来定义不同宽度的 CSS。假设您有默认的 Bootstrap 大小，这应该有效:
body {
background-color: #204d74;
font-size: 40px;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
body {
background-color:#449d44;
font-size:30px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
body {
background-color:#ac2925;
font-size:20px;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body {
background-color:#ffff00;
font-size:10px;
}
}<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">.col-xs-12 .col-sm-6 .col-md-6 .col-lg-4. .col-xs-12 .col-sm-6 .col-md-6 .col-lg-4 col-xs-12 .col-sm-6 .col-md-6 .col-lg-4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">.col-xs-12 .col-sm-6 .col-md-6 .col-lg-4. .col-xs-12 .col-sm-6 .col-md-6 .col-lg-4 col-xs-12 .col-sm-6 .col-md-6 .col-lg-4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">.col-xs-12 .col-sm-6 .col-md-6 .col-lg-4. .col-xs-12 .col-sm-6 .col-md-6 .col-lg-4 col-xs-12 .col-sm-6 .col-md-6 .col-lg-4</div>
</div>
</div>关于css - Bootstrap 在更改视口(viewport)大小时不应用 css 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30714578/