0

我正在使用 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 回答了 StackOverflow 上的问题，他创建了一个名为 makeFluidColumn How to use twitter bootstrap with bootstrap-sass in rails app？

但它不再包含在最新的 mixin 文件中，正如这个 github 问题中提到的那样： https ://github.com/thomas-mcdonald/bootstrap-sass/issues/191

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

4

1 回答 1

0

我最终推出了自己的@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;
}
于 2013-01-19T20:26:11.010 回答