@include makeColumn() Bootstrap Mixin not working

Question

Question

Why is the bootstrap-sass makeColumn(X) mixin not behaving the same as the Bootstrap .spanX class? For example, a class using makeColumn(9) does not look the same as the same div using a .span9 class.

Context

I'm building an application using Ruby on Rails and having major problems trying to use the mixins in the bootstrap-sass gem.

When I use the classes I've defined I don't get the same styling as if I were to just use the .span class in Bootstrap. I've looked all over the Internet and can't figure out what's wrong. I'm guessing it's something fairly obvious that I'm just not seeing because I've been staring at a screen for too long.

HTML

<div class="content">
  <div class="main">...</div>
  <div class="sidebar">...</div>
</div>

scss file

@import "bootstrap";

body {
    .main-content {
        @extend .container;
    }

    .content {
        @include makeRow();
    }

    .content .main {
        @include makeColumn(9);
    }

    .content .sidebar {
        @include makeColumn(3);
    }

    .feature {
        @include makeColumn(4);
    }

    padding-top: 60px;
}

footer {
    @extend .container;
}

@import "bootstrap-responsive";

Thanks for the help.

Answer 1

I'm not sure what SASS Adaptation you're using but in the one I'm using (https://github.com/anjlab/bootstrap-rails), there isn't a lot of documentation and the format changes.

Instead of @include makeRow(); you have to use:

@include make-row();

Instead of @include makeColumn(3); you have to use:

@include make-column(3);

more documentation can be found here: https://github.com/anjlab/bootstrap-rails/blob/master/app/assets/stylesheets/twitter/bootstrap/_mixins.scss