Bootstrap - 禁用某些页面的响应

时间:2013-06-11 21:32:31

标签: css cakephp twitter-bootstrap responsive-design

我正在为Web应用程序使用Bootstrap框架。响应式设计非常适用于我们网站的主要部分,需要在较小的屏幕上工作。但是,有一个管理部分,响应性不是必需的(将在桌面上管理)并阻碍(表单/表需要调整以更小的尺寸工作)。

是否有一种简单,可扩展的方式来关闭某些网页的自举响应?

现在,我们有一个包含@sizing元素的bootstrap .css文件。我可以将boostrap.cssbootstrap-responsive.css分开,然后只在需要它的网页上调用响应。我认为这可行,但意味着另一个设置(它是一个cakePHP应用程序)。

理想情况下,我想将一个类分配给将覆盖响应能力的主体或主容器 - <div class="container non-responsive">

另一个注意事项 - 在这种情况下,我真的只关心1024px以下的响应能力。它在更大的屏幕尺寸中扩展的方式在管理部分很有效。

1 个答案:

答案 0 :(得分:5)

即使它是另一种设置,分离它们也会更容易。当您从其主页(http://twitter.github.io/bootstrap/,而不是通过其自定义页面或通过GitHub项目)下载Bootstrap时,它已将响应式样式分离为单独的文件。

但是,您可以添加自己的样式,这些样式比Bootstrap中的每个响应样式更具体,并覆盖它们。它可能会变得毛茸茸,因为你基本上必须在bootstrap-responsive.css中重复所有内容并手动覆盖Bootstrap响应文件指定的每个样式属性。

更好的方法可能是编辑bootstrap-responsive.css并使用“.responsive”为媒体查询中的每个样式添加前缀,并将“响应”类添加到您希望响应的页面的body元素。

希望这有帮助。