当使用Bootstrap网格并将页面调整为小于最小列大小时,我的列不会自动堆叠。最小尺寸的列甚至都没有被识别,只有第二大的列尺寸及以上才能正常工作。如果在Firefox和Atom HTML预览中未按预期工作,我会认为我错误地使用了网格。以下是我的代码...
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>bootstrap interface</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-6 col-lg-12" style="background-color: red">
<h1>Red</h1>
</div>
<div class="col-sm-4 col-md-6 col-lg-6" style="background-color: white">
<h1>White</h1>
</div>
<div class="col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
<h1>Blue</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
图片
在谷歌浏览器中: bootstrap-failing-chrome
在火狐浏览器中: bootstrap-working-firefox
我认为这可能与使用cdn引入bootstrap有关,但是将其下载到本地并没有解决问题。
我在多个版本的Chrome中进行了测试,并删除了所有自己编写的css以查明是否是由于覆盖了bootstrap样式而导致的问题。