引导断点在 chrome 检查器中无法正常工作？

Question

编辑：我完全重写了这个问题，因为我认为我在原始帖子中不够清楚。

根据 bootstrap 的网站，浏览器每个类别列的宽度应该如下：

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

综上所述：col-xl为1200像素以上，lg在992-1199之间，md为768-991，sm为576-768，xs最大为575。

我的问题是，由于某种原因，我的网页表现得好像 xs 是 sm，sm 是 md，md 是 lg，lg 是 xl。

在 google chrome 检查器中查看此代码笔：https://codepen.io/colesam/full/YxjVwW/

lg及up中每行应该有3个项目，sm和md应该是每行2个，xs应该是1个。

请看下面的两个例子：

编辑 2：我的标题包含以下元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

编辑 3：我现在尝试在两台不同的计算机上检查页面，但得到相同的结果。我还更新了 Bootstrap，但无济于事。我真的很困惑为什么会发生这种情况。我尝试在 html 中添加 xl 列，无论屏幕尺寸有多大，xl 列都不会激活。

这是 google chrome 检查器工具的图像。它表明 .col-md-* 已激活，即使我们在 lg 列的范围内：

Answer 1

Bootstrap 是移动优先的，所以有

.col-xs-*
@media (min-width: 768px) { 
  .col-sm-*
}
@media (min-width: 992px) { 
  .col-md-*
}
@media (min-width: 1200px) { 
  .col-lg-*
}

对于网格（col-*）类 而不是

@media (max-width: 575px) { ... }
@media (max-width: 767px) { ... }
@media (max-width: 991px) { ... }
@media (max-width: 1199px) { ... }

Answer 2

原来我在使用 3.3.7 版本时正在查看 Bootstrap v4+ 的断点。

对于 Bootstrap 4，所有的断点都被转移，为 col-xl-* 腾出空间。

Bootstrap 3 断点是：

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Answer 3

<style>
       body{
   background: #007bff;
   }
 @media screen and (min-width: 576px){
   body{
   background: #007bff;
   }
  }
  @media screen and (min-width: 768px) {
  body{
  background: #dc3545;
   }
  } 
 @media screen and (min-width: 992px) {
   body{
  background: #28a745;
  }
 }
 @media screen and (min-width: 1200px) {
   body{
  background: 6f42c1;
  }
 }
</style>