Bootstrap断点在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检查器中查看此codepen：https://codepen.io/colesam/full/YxjVwW/

lg及以上每行应该有三个项目，sm和md应该是每行2个，而xs应该是1.

见以下两个例子：

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

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

编辑3：我现在尝试在两台独立的计算机上检查页面，但我得到了相同的结果。我也更新了Bootstrap，但无济于事。我真的很困惑为什么会发生这种情况。我尝试将xl列添加到html中，无论屏幕大小有多大，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-*
}

表示grid（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>