29

正如您在他们的页面上看到的,新的Bootstrap 3是“移动优先”:

在 Bootstrap 2 中,我们为框架的关键方面添加了可选的移动友好样式。使用 Bootstrap 3,我们从一开始就将项目重写为对移动设备友好。它们没有添加可选的移动样式,而是直接融入了核心。事实上,Bootstrap 是移动优先的。移动优先样式可以在整个库中找到,而不是在单独的文件中。

如何禁用响应能力?我希望我的网站不会为平板电脑或移动设备重新排列。

4

6 回答 6

44

有关详细说明的过程,请参阅如何将 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-breakpoint0

@screen-xs-max0(这将被修复;阅读此处

4) 对于网格布局,使用 .col-xs-* 类来补充或代替中/大型类。不用担心,超小型设备网格可扩展到所有分辨率,因此您已准备就绪。

不言自明

对于 IE8,您仍然需要 Respond.js(因为我们的媒体查询仍然存在并且需要获取)。这只是禁用了 Bootstrap 的“移动站点”。

于 2013-09-20T07:45:56.770 回答
5

如果没有对源代码进行主要修改,这似乎是不可能的。

以下链接详细说明了所需的更改:http: //bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

于 2013-07-30T17:53:48.127 回答
4

Bootstrap 3 文档实际上包含一个针对此问题的段落:http: //getbootstrap.com/getting-started/#disable-responsive

于 2013-08-20T14:30:41.403 回答
3

好吧,我一直在寻找同样的东西。我还没有检查出来,所以我不能证明它的功能,但这里有一个响应式的版本:

https://github.com/bassjobsen/non-responsive-tb3

于 2013-08-01T19:41:57.810 回答
0

查看 Jay Douglass 的答案,其中详细介绍了覆盖媒体查询断点变量以禁用响应功能。这是一个简单的解决方案,需要最少的更改。

如何删除 Twitter Bootstrap 3 中的响应式功能?

于 2013-08-17T00:59:42.427 回答
0

只需一点点努力,您就可以实现这一目标。

1) 移除视口

2)添加.container{ max-width: none !important; width: 970px; }到您的css文件

3)如果使用导航栏,撤消所有导航栏折叠和展开行为

4)

对于网格布局,使用 .col-xs-* 类来补充或代替中/大型类。不用担心,超小型设备网格可扩展到所有分辨率,因此您已准备就绪。

您可以点击以下链接:

http://getbootstrap.com/getting-started/#disable-responsive

于 2013-09-20T08:25:02.343 回答