Question

如果平均/最受欢迎的屏幕尺寸宽度现在超过1366px，为什么最大宽度：1170px的bootstrap最宽容器（来自他们的CDN）？

.container {
    max-width: 1170px;
}

我不应该相信我读过的所有内容吗？

顺便提一下，这来自很多方面，而不是我遇到的第一个来源。

问题的根本原因是我想设计最大宽度的桌面使用 - 当桌面设计最终确定时，我会担心平板电脑和手机。

Answer 1

关于屏幕分辨率

根据screenresolution.org，实际上最受欢迎的分辨率 1366x768，而不是更多。

关于那些1170px

对于桌面显示，Bootstrap使用1170px宽度，左/右侧填充15px：

@media (min-width: 1200px)
    .container {
        width: 1170px;
    }
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

快速计算：(1366 - 1200) / 2 = 83。
Bootstrap桌面布局在屏幕两侧保留（至少）83px的边距（如果计算填充，则为98px）。这不是那么大，它避免页面看起来拥挤。对于一个反例，Wikipedia使用100％宽度的布局，但很多人认为它“太多”，它会降低可读性。

如果我想更改此内容怎么办？

您不必担心Bootstrap宽度。当然你可以改变它。
几乎所有东西都在Bootstrap 3中设置为百分比。
看看Bootstrap customize & download page，你会发现一些有用的变量：

媒体查询断点
- @screen-xs-min: 480px
- @screen-sm-min: 768px
- @screen-md-min: 992px
- @screen-lg-min: 1200px
布局和网格系统
- @container-sm: ((720px + @grid-gutter-width))
- @container-md: ((940px + @grid-gutter-width))
- @container-lg: ((1140px + @grid-gutter-width))
- @grid-columns: 12
- @grid-gutter-width: 30px
- @grid-float-breakpoint: @screen-sm-min

Answer 2

例如，Galaxy S4实际上以1080p运行。把它放在纵向模式，你会认为它将运行完整的桌面网站，这比较5.5英寸屏幕与我的24英寸液晶显示器听起来很糟糕。看起来手机制造商已经对浏览器进行了“假”解决，可能还有某种“缩放”。我会测试一个真实的设备，或者至少是一个Android模拟器，看看它是什么行为。我通常会得到正确的网站，即使它具有高分辨率。

Answer 3

这可能是因为Bootstrap开发人员认识到许多开发人员不会准备好那么大的内容，而且改变宽度也是微不足道的。

How to change navbar/container width? Bootstrap 3

Bootstrap: how do I change the width of the container?

平均/最受欢迎的屏幕尺寸和bootstrap3

3 个答案:

关于屏幕分辨率

关于那些1170px

如果我想更改此内容怎么办？