0

Thomas Macdonald の sass バージョンのブートストラップ (bootstrap-sass) を使用しています。

ここで説明されているように、HTML に Bootstrap クラス (つまり、span7 または span10) を埋め込まないようにしています。
http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

ブートストラップ-sassでは、「span7」クラスをdivに適用できることがわかっている唯一のsass mixinは@include makeColumn(7);

これは固定グリッドでは機能しますが、流体グリッドでは機能しません。これらの列は流動的で応答性が高い必要があります。
@Thomas Macdonald は StackOverflow に関する質問に、彼が作成した makeFluidColumn と呼ばれる mix-in で答えました 。

ただし、この github の問題にも記載されているように、最新の mixin ファイルには含まれていません: 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 に答える