【问题标题】:How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]如何将 Twitter Bootstrap 3 用于非响应式网站? [复制]
【发布时间】:2013-07-30 09:31:15
【问题描述】:

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

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

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

【问题讨论】:

  • @devo:如果你想宣传一个问题,最好给它一个赏金。

标签: twitter-bootstrap responsive-design twitter-bootstrap-3


【解决方案1】:

有关更详细的说明,请参阅How to use Twitter Bootstrap 3 for non-responsive site

来自Bootstrap documentation(加上一些解释):

要禁用响应式功能,请按以下步骤操作。看到它在行动 在下面修改后的模板中。

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

不言自明

2) 删除 .container 上所有网格层的最大宽度 最大宽度:无!重要;并设置一个常规宽度,如宽度: 970像素;。确保它出现在默认的 Bootstrap CSS 之后。你 可以选择避免 !important 与媒体查询或一些 选择符。

添加此样式:

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

3) 如果使用导航栏,撤消所有导航栏的折叠和展开 行为(此处无法展示,请看示例)。

打开variables.less并设置变量:

@grid-float-breakpoint0

@screen-xs-max0(这将被修复;请阅读 here

4) 对于网格布局,除了或之外,使用 .col-xs-* 类 代替中/大的。别担心,超小的设备 网格可以扩展到所有分辨率,因此您已经设置好了。

不言自明

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

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        【解决方案4】:

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

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

        【讨论】:

          【解决方案5】:

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

          How to remove responsive features in Twitter Bootstrap 3?

          【讨论】:

            【解决方案6】:

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

            1) 移除视口

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

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

            4)

            对于网格布局,除了或在其中使用 .col-xs-* 类 中/大的地方。别担心,超小的设备 网格可以扩展到所有分辨率,因此您已经设置好了。

            您可以点击以下链接:

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

            【讨论】:

            • 3) “如果使用导航栏,请撤消所有导航栏的折叠和展开行为” - 关于某个主题的最详尽的帮助!
            • @Michael 你是对的,这不是应该的。这句话来自bootstrap的网站。无论如何,如果您使用任何 Bootstrap 的导航栏组件,您必须删除它的所有折叠和展开标签。要查看示例,请点击链接。 getbootstrap.com/examples/non-responsive希望对你有帮助
            猜你喜欢
            • 2014-10-02
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2013-07-29
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2014-11-08
            相关资源
            最近更新 更多