ruby-on-railstwitter-bootstrapresponsive-designtwitter-bootstrap-rails

Twitter Bootstrap & rails - center content and fix min width

In my html the content should be centered on screen and his width should never be greater then 950px.

Since I want this same html to show on mobile and desktop I am using twitter bootstrap to make the layout responsive.

The problem is: I cant seem to make the content div to be centered AND have the max width of 950px.

When I open on a browser the css has this media query: 

@media (min-width: 1200px)

that makes my div always fit the entire screen.

How can I fix this?

Basically what I want to do is something like this:

Schema

The orange line is the container (or body) and the blues are the rows

Thanks for any help.

EDIT

Just something I found that maybe help someone to help me

If I comment out this line: 

@import "twitter/bootstrap/responsive";

my div.content keeps the 950px width but my html loses its responsive behavior, which I don't want

EDIT 2

The html markup:

<html>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <%= Content goes here %>
        </div>
      </div>
    </div>
  </body>
</html>

but on the browser it creates this things:

body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px

Just to clarify, this is not a problem on twitter bootstrap, this is a problem on twitter-bootstrap-rails

The way I found to fix it on development is open the twitter-bootstrap-rails gem with gem-open and change the file: /vendor/toolkit/twitter/bootstrap/responsive.less commenting out these lines:

// LARGE DESKTOP & UP
// ------------------

@media (min-width: 1200px) {

  // Fixed grid
  #grid > .core(70px, 30px);

  // Fluid grid
  #grid > .fluid(5.982905983%, 2.564102564%);

  // Input grid
  #grid > .input(70px, 30px);

  // Thumbnails
  .thumbnails {
    margin-left: -30px;
  }
  .thumbnails > li {
    margin-left: 30px;
  }

}
Solution

  • Apparently it was a bug in the version of twitter-bootstrap gem i was using.

    I dropped that project so i cant test in that environment anymore, and in some new project that i tried twitter-bootstrap again and didn't see this error again.

    So i guess it is closed. thanks for everyone