我是 Bootstrap 3 的新手。我在使用网格系统时遇到问题:http://getbootstrap.com/css/#grid . 在 992px 以下一切正常。换句话说，<728 px 我的两个 div 堆栈，>728 px 它们是水平的。然而，在 992px 以上，它们再次堆叠。我的目标是我的两个 div 只堆叠“超小型设备电话(<768px)”。不适用于更大的屏幕。
这是我的 html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class ="container">
<div class ="row">
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
</div>
</div>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
编辑:
请看图片。它对我不起作用(无论是在 FF 还是在 Chrome 中)。
图一有效。
使屏幕变宽，它开始堆叠:
最佳答案
将下面的类添加到您的每个 block 中，这些 block 必须在小版本中一个接一个地堆叠。
col-lg-6 col-sm-12
col-lg-6 说: 在 LG 和更小的尺寸中使 block 宽度为 50%
col-sm-12 说: 在 SM 和更小的尺寸中使 block 100% 宽度
缩放。这是预期的行为。缩放会改变您的 page_width/element_width 比率。 所以你通常会在缩放后得到其他断点。
关于css - Bootstrap 3 : why do my <div>s stack from 992 px width onwards when using "col-sm-6"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18209715/