如何将Twitter Bootstrap 3用于非响应式网站?

Fre*_*d K 29 responsive-design twitter-bootstrap twitter-bootstrap-3

正如您可以在他们的页面上阅读的那样,新的Bootstrap 3是"先移动":

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

如何禁用响应?我希望我的网站不会重新安排自己的平板电脑或手机.

Fre*_*d K 44

有关更详细的说明,请参阅如何将Twitter Bootstrap 3用于非响应式站点

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

要禁用响应功能,请按照下列步骤操作.在下面的修改模板中查看它的实际操作.

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

不言自明

2).container使用max-width:none!important 删除所有网格层的最大宽度; 并设置宽度的常规宽度:970px;.确保这是在默认的Bootstrap CSS之后.您可以选择使用媒体查询或某些selector-fu来避免使用!important.

添加此样式:

.container{
  max-width: none !important;
  width: 970px;
}
Run Code Online (Sandbox Code Playgroud)

3)如果使用导航栏,撤消所有导航栏折叠和展开的行为(这是太多,在这里展示,让偷看的例子).

打开variables.less并设置变量:

@grid-float-breakpoint0

@screen-xs-maxto 0(这将被修复; 在这里阅读)

4)对于网格布局,除了中/大类之外,还应使用.col-xs-*类.不用担心,超小型设备网格可以扩展到所有分辨率,因此您可以将其设置在那里.

不言自明

你仍然需要针对IE8的Respond.js(因为我们的媒体查询仍在那里,需要被选中).这只是禁用Bootstrap的"移动站点".


Chr*_*ris 5

没有主要的mods来源,它似乎是不可能的.

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