作者探讨了在使用Bootstrap 2.3.2媒体查询时遇到的水平滚动条问题，发现垂直滚动条的存在影响了媒体查询中宽度设置。文章质疑Bootstrap 3.3.2中为何不考虑最小宽度，以及如何解决滚动条导致的布局问题。
我目前正在玩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的人是否故意这样做,因为可能存在垂直滚动条？
问题：当垂直滚动条存在时,为什么我不能在媒体查询中使用最小可能宽度？
我知道这可能是一个新手问题,但如果有人为我澄清这一点,我将不胜感激.
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
