Bootstrap - disable responsiveness on certain pages

Question

I am using the Bootstrap framework for a web application. Responsible design works very well for the main part of our site, which should work on small screens. However, there is an administrator section in which responsiveness is not necessary (it will be administered on desktops) and interferes (forms / tables require settings to work on smaller sizes).

Is there a simple and scalable way to turn off loading reactions for specific pages?

Right now, we have one bootable .css file with @sizing elements enabled. I could highlight boostrap.css and bootstrap-responsive.css , and then only respond to pages that need it. I suppose this will work, but will mean another tweak (this is cakePHP application).

Ideally, I would like to assign a class to the body or the main container, which would cancel responsiveness - <div class="container non-responsive">

One more note - in this case, I only care about the reaction below 1024 pixels. The way it expands to larger screen sizes works well in the admin section.

Answer 1

Separating them will be easier, even if this is another setting. When you download Bootstrap from your homepage ( http://twitter.imtqy.com/bootstrap/ , rather than through the Customize page or through the GitHub project), it already separates sensitive styles into a separate file.

However, you can add your own styles that are more specific than each of the sensitive styles in Bootstrap and override them. This can get hairy because you basically have to repeat everything in bootstrap-responsive.css and manually override for each style property specified in the Bootstrap boot file.

The best approach would be to edit bootstrap-responsive.css and prefix each style in the media request with ".responsive" and add a "responsive" class to the body element of the pages you want to be responsive to.

Hope this helps.