如何使用Twitter的Bootstrap 3无响应的网站?

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

使用Bootstrap 2,我们为框架的关键部分添加了可选的移动友好样式。 在Bootstrap 3中,我们从一开始就将项目改写为移动友好 。 他们没有添加可选的移动样式,而是直接进入核心 。 事实上,Bootstrap是最先移动的。 移动第一种风格可以在整个库中find,而不是在单独的文件中。

我如何禁用响应? 我希望我的网站不会为平板电脑或手机重新排列。

有关更多解释的步骤,请参阅如何将Twitter Bootstrap 3用于无响应的站点

从Bootstrap文档 (加上一些解释):

要禁用响应function,请按照下列步骤操作。 在下面的修改模板中看到它的实际操作。

1) 删除(或只是不添加) CSS文档中提到的视口<meta>

不言自明

2)删除所有网格层的.container上的最大宽度,使用最大宽度:无!important; 并设置一个像宽度为970px的常规宽度。 确保这是在默认的Bootstrap CSS之后。 您可以select避免重要的媒体查询或一些select福。

添加这个样式:

 .container{ max-width: none !important; width: 970px; } 

3)如果使用导航栏,请撤消所有的导航栏折叠和展开行为(这里显示的太多了,所以偷看示例)。

打开variables.less并设置variables:

@grid-float-breakpoint0

@screen-xs-max0 (这将是固定的;读这里 )

4)对于网格布局,除了使用.col-xs- *类以外,还可以使用.col-xs- *类 。 别担心,超小型设备网格可以扩展到所有分辨率,所以你就可以在这里设置。

不言自明

你仍然需要IE8的Respond.js(因为我们的媒体查询仍然存在,需要拿起)。 这只是禁用Bootstrap的“移动网站”。

没有主要的mod来源,这似乎是不可能的。

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

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

那么,我正在寻找同样的事情。 我还没有检查出来,所以我不能证实它的function,但是这里是一个带有响应的版本:

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

请查看Jay Douglass的答案,其中详细说明覆盖媒体查询断点variables以禁用响应function。 这是一个简单的解决scheme,只需要很less的变化

如何删除Twitter Bootstrap 3中的响应function?

用一点点努力,你可以实现这一点。

1)移除视口

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

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

4)

对于网格布局,除了使用.col-xs- *类以外,还可以使用.col-xs- *类。 别担心,超小型设备网格可以扩展到所有分辨率,所以你就可以在这里设置。

你可以按照下面的链接:

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