CSS響應垂直滾動條問題

Question

我目前正在玩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; 
    } 
} 

這將觸發horizontal scrollbar - JSBin

沒有從引導的球員這樣做的目的，因爲可能存在垂直滾動條？

---

問題：爲什麼我不能用最小可能寬度在媒體查詢時垂直滾動條出現？

我知道這可能是一個新手問題，但如果有人爲我澄清這一點，我將不勝感激。

Answer 1

引導媒體Querys

設置媒體查詢

引導支持四種介質尺寸：

手機< 768px（8英寸）

片≥768px

桌面≥992px（10.33英寸）

臺式機≥1200像素（12。5英寸）

這些不是固定尺寸！

如果你有屏幕具有的768px一個最小寬度的媒體查詢應觸發。
容器但是設置爲768px幾乎八方通作出這樣的畫面溢出

首先所有現代瀏覽器的所有body元素確實有餘量的。
例如：Webkit的瀏覽器：body {margin: 8px;}因此，如果您的768px元和8和8邊距保證金頂你：784px
讓你的屏幕是768px（或更少），你的內容是784px這將使它溢出（因爲它應該）。 也就是說引導程序集：body {margin:0;}

另一個例子是邊界。除非box-sizing不是默認值，邊框會將大小添加到您的元素中。雖然大綱在您的元素內設置邊框。

的確從引導的球員這樣做有目的的，因爲possibily，有可能是vertical scrollbar存在？

還有就是一個可能性，但我認爲他們將它，因爲有一堆的CSS屬性的影響大小，所以他們給了錯誤的保證金可以這麼說，以避免像一個水平奇怪的行爲滾動條彈出。

問題：爲什麼我不能在垂直滾動條存在時在媒體查詢中使用盡可能最小的寬度？

您可以使用它：Fiddle! 只記得一些瀏覽器將具有一定寬度的渲染。

Answer 2

結帳小提琴 https://jsfiddle.net/YameenYasin/as4Lmgas/1/

html { 
    box-sizing: border-box; 
} 

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

body{ 
    margin: 0; 
} 

div { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
    background: blue; 
    height:auto; 
    min-height:300px; // For testing purpose only 
} 
@media (min-width: 768px) { 
    div { 
    width: 750px; 
    background: silver; 
    } 
} 
@media (min-width: 992px) { 
    div { 
    width: 970px; 
    background: yellow; 
    } 
} 
@media (min-width: 1200px) { 
    div { 
    width: 1170px; 
    background: red; 
    } 
} 



<div></div>