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的响应式设计视图（ctrl + shift + m）进行测试。这会影响吗？

更新：我弄明白为什么它搞乱......在我的网络风暴中，我点击了“在FF中预览”，当你盘旋时出现，带我到“localhost：63342 /应用/ index.html的”。不知道为什么，但是当我使用“file：///home/me/dev/app/index.html”浏览到该位置时，它可以工作。的为什么吗

Answer 1

在您的代码段中，更改会在768px完全正确发生。

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

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

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

1 个答案: