Reconciling Bootstrap-sass with Bootstrap Issue #1778 for span16

[daidekman]

Forgive me if this is a naive noob question, but I am trying to understand how to adjust the grid system to accommodate up to .span16. It seems that others have had this problem with a potential solution here:

twbs/bootstrap#1778 (comment)

The suggestion is to modify mixins.less. Since we are using sass here, it is not clear to me where to find and modify this file. What is the best approach to achieving these spans while using this gem?

Many thanks.

[thomas-mcdonald]

These variables control what you're after. If you override them before @importing "bootstrap" our Sass grid system (should) automagically generate .span1...16 classes, as well as offsets, input spans etc. You'll need to tweak the sizings to fit, but there seems to be some values you can try in that linked issue. You also only need to override the tablet/large definitions if you'll be using the responsive files.

// FIXED GRID
// --------------------------------------------------

// Default, 940px
// -------------------------
$gridColumns:             12;
$gridColumnWidth:         60px;
$gridGutterWidth:         20px;
$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));

// Portrait tablet to default desktop
// -------------------------
$gridColumnWidthTablet:   42px;
$gridGutterWidthTablet:   20px;

// Large desktop and up
// -------------------------
$gridColumnWidthLarge:    70px;
$gridGutterWidthLarge:    30px;

Let me know how you get on.

[daidekman]

Thanks for the quick reply. Unfortunately, I'm still struggling with this.

As a test of setting the proper layout, I am aiming for a 16 column responsive grid with a max-width of 1280px.

My simple math is: 16 columns x ( 60px width + 20px gutter) = 1280px. When I set this up, a div with span16 is much wider than 1280px and results in a horizontal scrollbar. I have set up an adjacent div with fixed width: 1280px to compare. A span12 matches the 1280px wide div, which is odd. Something must be off in my setup and I can't discern what it is. My setup on the top lines of my css.scss file is like this:

$gridColumns: 16;
$gridColumnWidth: 60px;
$gridGutterWidth: 20px;
$gridColumnWidthLarge: 60px;
$gridGutterWidthLarge: 20px;
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
@import 'bootstrap';
@import 'bootstrap-responsive';

Any advice would be most welcome.

[ivalkeen]

It seems that this code in not in master branch yet (only in 2.0.3). You can try using 2.0.3 branch by modifying your Gemfile:

gem 'bootstrap-sass', :git => "git://github.com/thomas-mcdonald/bootstrap-sass.git", :branch => "2.0.3"

and then running bundle install

With this branch, 16 columns grid works for me, but I also use compass-rails and have this javascript issue: #134, so I have to disable compass-rails gem or remove //= require bootstrap from my application.js.