代码之家 › 专栏 › 技术社区 › Scoob

引导断点在chrome检查器中工作不正常?

twitter-bootstrap css html

Scoob · 技术社区 · 9 年前

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

根据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中查看此代码笔: https://codepen.io/colesam/full/YxjVwW/

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

编辑2:我的标题包括以下元标记:

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

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

这是谷歌chrome inspector工具的图片。它表明了这一点。列md-*被激活,即使我们在lg列的界限内:

3 回复 | 直到 9 年前

Eugene Voynov 9 年前

Bootstrap首先是移动的,所以

.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) { ... }

Scoob 9 年前

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

对于Bootstrap 4,所有断点都被移动,为列xl-*腾出空间。

/* 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) {

}

Tadei 5 年前

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