我目前正在玩bootstraps v2.3.2. media querys(我没有使用bootstraps网格,只有那4个媒体查询)来测试它们在移动设备和平板设备上,我注意到我一直在获得一个水平滚动条,我不明白为什么？

基本上我有一个div和这个CSS：

html {
    Box-sizing: border-Box;
}

*,*:before,*:after {
    Box-sizing: inherit;
}

body{
    margin:0;
    /* height: 3000px; */  /* forced vertical scrollbar */
    height: 300px;
}

div{
    padding: 0 10px;
    margin: 0 auto;
    background: aqua;
    width: 980px;
    border: 1px solid black;
    height: 100%;
}

/* Large desktop */
@media (min-width: 1200px) {
    div{
        background: red;
        width: 1200px;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    div{
        background: yellow;
        width: 768px;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    div{
        background: blue;
        width: 100%;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    div{
        background: green;
    }
}

我强制垂直滚动条时的情况：JSBin

但是当我不强制垂直滚动条时,我得到了想要的结果：JSBin

所以它显然是由于垂直滚动条.我在响应式网页设计中找到了关于滚动条问题的article,但我在Chrome和FF中都得到了相同的结果.

更新：作为查看bootstrap v3.3.2的来源,我注意到他们有新的媒体查询,但是,他们没有使用.container的最小可能宽度.这是他们的媒体查询：

@media (min-width: 768px) {
    .container {
        width: 750px; /* 18px difference */
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px; /* 22px difference */
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px; /* 30px difference */
    }
}

这是JSBin.即使我强制显示垂直滚动条,也不会触发水平滚动条.

但是,如果我想使用媒体查询的最小可能宽度,例如：

@media (min-width: 768px) {
    .container {
        width: 768px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 992px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}

这将触发水平滚动条 – JSBin

来自bootstrap的人是否故意这样做,因为可能存在垂直滚动条？

问题：当垂直滚动条存在时,为什么我不能在媒体查询中使用最小可能宽度？

我知道这可能是一个新手问题,但如果有人为我澄清这一点,我将不胜感激.