Html 引导断点在chrome inspector中工作不正常？

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

根据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

总而言之：xl列为1200像素及以上，lg在992-1199之间，md为768-991，sm为576-768，xs为575

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

在google chrome inspector中查看此代码笔：

lg和up中每行应包含三个项目，sm和md应为每行2个，xs应为1个

见以下两个示例：

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

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

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

这是谷歌chrome inspector工具的图片。它显示.col md-*被激活，即使我们在lg列的范围内：

---

引导首先是移动的，因此

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

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

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

---

事实证明，在使用3.3.7版时，我正在查看引导v4+的断点

对于bootstrap4，所有断点都被转移，以便为col xl-*腾出空间

引导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) {

}

身体{
背景：#007bff；
}
@媒体屏幕和屏幕（最小宽度：576px）{
身体{
背景：#007bff；
}
}
@媒体屏幕和屏幕（最小宽度：768px）{
身体{
背景：#dc3545；
}
} 
@媒体屏幕和屏幕（最小宽度：992px）{
身体{
背景#28a745；
}
}
@媒体屏幕和屏幕（最小宽度：1200px）{
身体{
背景：6f42c1；
}
}

我不明白。如果你发布的断点是引导断点，为什么他们的网站上有不同的断点？为什么？对于Bootstrap4文档或（查看第一行，有“等于或大于”运算符）。正如您所见，他们说“这些断点主要基于最小视口宽度…”和“我们偶尔会使用朝另一个方向（给定屏幕大小或更小）的媒体查询”。我刚刚查找了引导代码。它们只对“导航栏”和“隐藏”类使用“最大宽度”断点。根据您的链接，大的大于等于992像素。在我的第二张图片中，所有col lg-*css都被破坏了，尽管它应该仍然在该范围内。您可能忘记了viewport meta标记的副本。我的主项目上有这个标记：但我不知道我需要一个用于代码笔的标记。我现在将更新代码笔。您正在使用哪个版本的引导？代码笔上的3.3.7

<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>