我目前很好奇如何区分我的 BS 3 网格在 桌面尺寸（更宽的屏幕） 和 笔记本电脑尺寸（更小的屏幕）。例如，目前我在容器中心有一个盒子形式，如下所示：
<div className="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
...
</div>
在桌面（更宽的屏幕）中看起来不错，它位于中间，左右空间相同。但是，如何让它在笔记本电脑（小屏幕）中左右两边没有空间显得满了（col-md-12）？如果我在两个设备中检查devtools 上的元素，它们都被置于BS 的media query 的col-md 条件下，因此较小的设备将继续获得col-md-8 col-md-offset-2 col-sm-12 col-xs-12 classes。
【问题讨论】：
标签： css twitter-bootstrap-3 media-queries
网格断点基于最小宽度媒体查询，这意味着 它们适用于该断点及其以上的所有断点（例如，
.col-sm-4适用于小型、中型、大型和超大型设备， 但不是第一个 xs 断点）
您可以组合这些类以获得每种屏幕尺寸所需的结果。
EDIT ：更改了 sn-p 并添加了一个完整的代码，可以达到预期的结果 -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row bg-danger" style = "height:200px;">
<div class="col-md-0 col-lg-2"></div> <!--This will leave correct space on the sides of screen according to screen size-->
<div class="col-md-12 col-lg-8 bg-success text-center" style = "top:50px;height:50px;">
Your box
</div> <!--Consider this div to be your box-->
</div>
</body>
</html>
上面的代码sn -p会将div的大小设置为-
您可以根据不同的屏幕尺寸以类似的方式组合网格以达到所需的效果。
希望这能解决您的问题！
【讨论】：
col-lg-8 col-md-12 col-md-offset-2 col-sm-12 col-xs-12 尝试过，但在我的笔记本电脑上，它看起来仍然得到col-lg-8 断点，而不是进入col-md-12。
1230 x 1012px，屏幕尺寸为 13"。但我想做它显示为col-md-12 没有空格，空格应该只在桌面大小中可见。
content 框在我的笔记本电脑屏幕上应该是12-grids，但keep 变成8-grids。