css - 缺少带有Sass MakeFluidColumn mixin的Twitter Bootstrap-尝试不对HTML类中的内容进行硬编码

我正在使用Thomas Macdonald的sass版本的bootstrap（bootstrap-sass）

我正在尝试不按此处所述在我的html中嵌入Bootstrap类（即span7或span10）。
http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

在bootstrap-sass中，我知道唯一可用于将“ span7”类应用于div的sass mixin是@include makeColumn(7);

这适用于固定网格，但不适用于流体网格。我需要这些专栏来使之流畅和响应。
@Thomas Macdonald用他创建的名为makeFluidColumn的混合方式回答了StackOverflow上的问题
How to use twitter bootstrap with bootstrap-sass in rails app?

但是它不再包含在最新的mixin文件中，每个github问题也提到了这一点：
https://github.com/thomas-mcdonald/bootstrap-sass/issues/191

还有什么我需要做的吗？我需要能够将跨度更改为mixin，因为我正试图通过媒体查询根据视口大小来更改div跨度的列数。

最佳答案

我最终滚动了自己的@mixin。

所以不要使用引导程序的@include makeColumn（i）;我可以执行@include col（i）以将i列宽应用于div或其他元素。只需包含此SCSS文件

    /*=VARIABLES - GRID
------------------------------------------------*/
$columns: $gridColumns; //from bootstrap/_variables.scss
$column-width: $gridColumnWidth; //from bootstrap/_variables.scss
$gutter-width: $gridGutterWidth; //from bootstrap/_variables.scss
$max-width: $columns * ($column-width + $gutter-width);


/*=VARIABLES - FONTS
------------------------------------------------*/
$font-base: $baseFontSize; //from bootstrap/_variables.scss
$font-base-line-height: $baseLineHeight; //from bootstrap/_variables.scss
$font-base-line-height-half: $font-base-line-height / 2;
$font-base-percentage: (($font-base / 16px) * 100) + 0%;


/*MIXINS
------------------------------------------------*/
@mixin col($n, $padding: 0px, $border: 0px, $container-width: $max-width) {
    float: left;
    margin-left: percentage($gutter-width / $container-width);
    width: percentage(($n * ($column-width + $gutter-width) - $gutter-width - ($padding * 2) - ($border * 2)) / $container-width);
    border-width: $border;
    padding: em($padding, $font-base) percentage($padding / $container-width);
}

/*FUNCTIONS
------------------------------------------------*/
@function em($target, $context: $font-base) {
    @if $target == 0 { @return 0 }
    @return $target / $context + 0em;
}

@function perc($width, $container-width: $max-width) {
    @return percentage($width / $container-width);
}

@function lh($amount: 1, $context: $font-base) {
    @return em($font-base-line-height * $amount, $context);
}

@function heading-line-height($size) {

    $line-height: $font-base-line-height;

    $match: false;
    @while $match != true {

        @if $size == $line-height {
            $match: true;
        } @else if  $size < $line-height {
            $match: true;
        } @else if $size > $line-height {
            $line-height: $line-height + $font-base-line-height;
        } @else {
            $match: true;
        }

    }

    @return ($line-height / $size) + 0em;
}