Bootstrap 3 offset on right not left

后端 未结 9 1624
情歌与酒
情歌与酒 2020-12-07 18:25

In regards to BS 3 if I wanted just a narrow column of content on the right I might use an offset class of 9 and a column of 3.

However, what if I wanted the reverse

9条回答
  •  慢半拍i
    慢半拍i (楼主)
    2020-12-07 18:40

    I modified Bootstrap SASS (v3.3.5) based on Rukshan's answer

    Add this in the end of the calc-grid-column mixin in mixins/_grid-framework.scss, right below the $type == offset if condition.

    @if ($type == offset-right) {
          .col-#{$class}-offset-right-#{$index} {
              margin-right: percentage(($index / $grid-columns));
          }
      }
    

    Modify the make-grid mixin in mixins/_grid-framework.scss to generate the offset-right classes.

    // Create grid for specific class
    @mixin make-grid($class) {
      @include float-grid-columns($class);
      @include loop-grid-columns($grid-columns, $class, width);
      @include loop-grid-columns($grid-columns, $class, pull);
      @include loop-grid-columns($grid-columns, $class, push);
      @include loop-grid-columns($grid-columns, $class, offset);
      @include loop-grid-columns($grid-columns, $class, offset-right);
    }
    

    You can then use the classes like col-sm-offset-right-2 and col-md-offset-right-1

提交回复
热议问题