防止在大屏幕上拉伸全宽度布局

Question

我想知道是否有办法阻止全屏布局在大屏幕上拉伸。一个例子是mashable.com，在我的屏幕（13英寸）上，布局是全宽的。如果您尝试缩小页面，您会注意到布局不是全宽。

这就是布局在中小屏幕上的显示方式：

以下图片适用于较大的屏幕，请注意它现在不是全宽：

另一个例子，下面的设计是一个全宽度的布局，我想在宽屏幕上观看它时防止拉伸它。

有什么想法吗？我们如何在Bootstrap 3中实现它

谢谢，

Answer 1

默认情况下，Bootstrap使用1140像素网格，请参阅http://getbootstrap.com/css/#grid。只需在您的内容周围添加.container即可确保内容永远不会变大。

可以通过使用http://getbootstrap.com/customize/创建自定义版本的Bootstrap或自行编译Bootstrap并设置@container-large-desktop变量

来自定义最大大小

Answer 2

添加＆＃39; max-width＆＃39;到您的容器/包装器。例如：

.container {
width: 100%;
max-width: 1550px;
}

在这个例子中，网站将完全展现出来并且＃39;在整个屏幕上，直到屏幕尺寸超过1550px宽。

查看缩小版演示here

Answer 3

使用max-width停止在较大的屏幕上获得100％的宽度：

div.container{
margin: auto;
padding: 0;
width: 100%;
max-width: 1024px;
height: auto;
}