jquery - Bootstrap 3 sm vs xs - webstorm 改变断点？

Question

我正在开发一个响应式网站，当我在浏览器 (FF) 中调整大小时，我注意到页面没有从 xs 切换到 sm 直到 837px 宽。根据bootstrap，应该是768px，为什么会这样呢？

有问题的代码:

div {
  border: 1px solid black;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-xs-2 col-sm-10">
  <p>some content</p>
</div>

我什至试过这个:

@media (max-width: 767px) {
  width: something to test with;
}

我正在使用 FireFox 的响应式设计 View (ctrl + shift+ m) 对此进行测试。有影响吗？

更新: 我弄清楚了为什么它搞砸了......在我的 webstorm ide 中，我点击了当你悬停时出现的“在 FF 中预览”，带我到“localhost:63342/应用程序/index.html”。不知道为什么，但是当我使用“file:///home/me/dev/app/index.html”浏览到该位置时，它起作用了。 为什么？

Answer 1

在您的代码片段中，更改正确地发生在恰好 768px 处。

如果它不适合您，则您的浏览器有问题。尝试重新启动它，禁用插件等。问题不在于页面本身的代码。

如果更改正确发生在您的代码片段中而不是您的实际页面中，则意味着有一些其他 CSS 覆盖了 Bootstrap 的 CSS。您需要做的就是检查浏览器宽度介于 768 像素和 837 像素之间的元素，并查看 width:16.66666667%; 的来源。