下午好，
我在响应式网络上工作，我需要在小显示器上做 1 列，在大显示器上做 2 列。我使用了 col-12 和 col-lg-6 但当我需要更改它时，组合 col-12 和 col-md-6 没有工作。
奇怪的是它在 jsfiddle 上有效，但在我的网站上无效。
这是我网站上的代码和 jsfiddle 链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<style>
#blue {
background:blue;
}
#red{
background: red;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-md visible-lg"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>
<div class="row">
<div id="blue" class="col-12 col-md-6">
class="col-12 col-md-6"
</div>
<div id="red" class="col-12 col-md-6 ">
class="col-12 col-md-6"
</div>
</div>
<div class="row">
<div id="blue" class="col-12 col-lg-6">
class="col-12 col-lg-6"
</div>
<div id="red" class="col-12 col-lg-6 ">
class="col-12 col-lg-6"
</div>
</div>
</div>
</body>
</html>
最佳答案
JSFiddle 和在浏览器上运行之间的差异似乎是设备大小。 JSFiddle 示例作为中型设备运行，而您的 Web 示例可能足够大，可以像我的那样成为大型设备。您的代码失败是因为在大型设备上，如果这是您的问题，将选择“col-12”而不是“col-md-6”。
关于css - Bootstrap 网格小中号不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47075743/