Responsive bootstrap-sass setup

Question

I'm trying to use bootstrap-sass (2.1.0.0) for a responsively designed Ruby on Rails 3.2.8 site. This is my first attempt at responsive design with Rails or Bootstrap.

The problem is that some, but not all, of my CSS styles are being matched to the appropriate selectors. Specifically, the custom styles that I apply to, say, .navbar-fixed-top in custom.css.scss appear both in my compiled custom.css stylesheet and on the page rendered in the browser. However, the responsive Bootstrap styles for .navbar-fixed-top appear in the compiled custom.css (according to Chrome's Inspector) but do not appear on the page rendered in the browser.

If, inside custom.css.scss, I change @import "bootstrap-responsive"; back to the default @import "bootstrap";, the Bootstrap styles for .navbar-fixed-top appear on the rendered page. The issue seems to be related to the responsiveness specifically.

I've had trouble finding related info related to my specific issue. I changed the Bootstrap default meta name="viewport" tag to <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> after finding this question, but my issue isn't iPhone specific.

I've also been restarting the $ rails server while troubleshooting this issue.

I'm at a loss on how to troubleshoot this further. Any help would be much appreciated.

Answer 1

bootstrap-responsive is a supplement to bootstrap. Try including them both with bootstrap-responsive below bootstrap.

@import "bootstrap";
@import "bootstrap-responsive";

From http://twitter.github.com/bootstrap/scaffolding.html#responsive:

Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the of your document.