twitter/bootstrap — Issue #2302: Changing number of columns to 9 doesn't work under responsive layout
Author: bbirand
Created: 2012-02-28 06:09:46+00:00
State: open

Hi,

I just downloaded Bootstrap through Initializr, and decided to change the default number of columns to 9 (so that I can have three boxes centered on the page). I did this change by modifying the following lines variables.less:

// Default 940px grid
@gridColumns: 9;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Then I did the following change in the responsive.less file to support large screens:

@media (min-width: 1200px) {

// Fixed grid
#gridSystem > .generate(9, 70px, 30px);

// Fluid grid
#fluidGridSystem > .generate(9, 5.982905983%, 2.564102564%);

// Input grid
#inputGridSystem > .generate(9, 70px, 30px);

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

}

Under the "default" view, the screen looks fine. When I widen to screen to something above 1200px, I noticed that the grid returns to the 12 column layout. When I look at the "width" attribute of .container, I can see clearly that it is 1170px, as opposed to the 870px it was supposed to be.

I believe this is a bug. I went over the code for "generate" but couldn't exactly spot the problem.