正如您在他们的页面上看到的,新的Bootstrap 3是“移动优先”:
在 Bootstrap 2 中,我们为框架的关键方面添加了可选的移动友好样式。使用 Bootstrap 3,我们从一开始就将项目重写为对移动设备友好。它们没有添加可选的移动样式,而是直接融入了核心。事实上,Bootstrap 是移动优先的。移动优先样式可以在整个库中找到,而不是在单独的文件中。
如何禁用响应能力?我希望我的网站不会为平板电脑或移动设备重新排列。
正如您在他们的页面上看到的,新的Bootstrap 3是“移动优先”:
在 Bootstrap 2 中,我们为框架的关键方面添加了可选的移动友好样式。使用 Bootstrap 3,我们从一开始就将项目重写为对移动设备友好。它们没有添加可选的移动样式,而是直接融入了核心。事实上,Bootstrap 是移动优先的。移动优先样式可以在整个库中找到,而不是在单独的文件中。
如何禁用响应能力?我希望我的网站不会为平板电脑或移动设备重新排列。
有关详细说明的过程,请参阅如何将 Twitter Bootstrap 3 用于非响应站点
来自Bootstrap 文档(加上一些解释):
要禁用响应功能,请按照以下步骤操作。在下面修改后的模板中查看它的实际效果。
1)删除(或只是不添加)
<meta>
CSS文档中提到的视口
不言自明
2) 删除
.container
所有网格层的最大宽度 max-width: none !important; 并设置一个常规宽度,如 width: 970px;。确保它出现在默认的 Bootstrap CSS 之后。您可以选择使用媒体查询或某些选择器来避免 !important。
添加此样式:
.container{
max-width: none !important;
width: 970px;
}
3) 如果使用navbars,撤消所有的 navbar 折叠和展开行为(这里显示太多了,所以请看示例)。
打开variables.less
并设置变量:
@grid-float-breakpoint
到0
@screen-xs-max
到0
(这将被修复;阅读此处)
4) 对于网格布局,使用 .col-xs-* 类来补充或代替中/大型类。不用担心,超小型设备网格可扩展到所有分辨率,因此您已准备就绪。
不言自明
对于 IE8,您仍然需要 Respond.js(因为我们的媒体查询仍然存在并且需要获取)。这只是禁用了 Bootstrap 的“移动站点”。
如果没有对源代码进行主要修改,这似乎是不可能的。
以下链接详细说明了所需的更改:http: //bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
Bootstrap 3 文档实际上包含一个针对此问题的段落:http: //getbootstrap.com/getting-started/#disable-responsive
好吧,我一直在寻找同样的东西。我还没有检查出来,所以我不能证明它的功能,但这里有一个响应式的版本:
查看 Jay Douglass 的答案,其中详细介绍了覆盖媒体查询断点变量以禁用响应功能。这是一个简单的解决方案,需要最少的更改。
只需一点点努力,您就可以实现这一目标。
1) 移除视口
2)添加.container{ max-width: none !important; width: 970px; }
到您的css文件
3)如果使用导航栏,撤消所有导航栏折叠和展开行为
4)
对于网格布局,使用 .col-xs-* 类来补充或代替中/大型类。不用担心,超小型设备网格可扩展到所有分辨率,因此您已准备就绪。
您可以点击以下链接: