Making the Bootstrap grid work with IE8

Ie8.scss

@charset 'UTF-8';

// Import your variables
@import 'my/variables';

// Import bootstrap variables
@import 'bootstrap/variables';

// IE 8
// -----------------------------------------------------------------------------

// Fix for the grid in ie8

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
// [converter] $parent hack
@mixin responsive-visibility($parent) {
  #{$parent} {
    display: block !important;
  }

  table#{$parent} {
    display: table;
  }

  tr#{$parent} {
    display: table-row !important;
  }

  th#{$parent},
  td#{$parent} {
    display: table-cell !important;
  }
}

// [converter] $parent hack
@mixin responsive-invisibility($parent) {
  #{$parent} {
    display: none !important;
  }
}

// Grid System
// -----------

// Centered container element
@mixin container-fixed() {
  margin-right: auto;
  margin-left: auto;
  padding-left: ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
  @include clearfix();
}

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  @include clearfix();
}

// Generate the extra small columns
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
}

@mixin make-xs-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}

@mixin make-xs-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}

@mixin make-xs-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}


// Generate the small columns
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
  float: left;
  width: percentage(($columns / $grid-columns));
}

@mixin make-sm-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}

@mixin make-sm-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}

@mixin make-sm-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}


// Generate the medium columns
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
  float: left;
  width: percentage(($columns / $grid-columns));
}

@mixin make-md-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}

@mixin make-md-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}

@mixin make-md-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}


// Generate the large columns
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
  float: left;
  width: percentage(($columns / $grid-columns));
}

@mixin make-lg-column-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}

@mixin make-lg-column-push($columns) {
  left: percentage(($columns / $grid-columns));
}

@mixin make-lg-column-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class) {
  $list: '';
  $i: 1;
  $list: ".col-#{$class}-#{$i}";
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }

  #{$list} {
    float: left;
  }
}


@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) {
    .col-#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }
  @if ($type == pull) {
    .col-#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }
  @if ($type == offset) {
    .col-#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
  }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
  }
}


// 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 make-grid(xs);
@include make-grid(sm);
@include make-grid(md);
@include make-grid(lg);

@include responsive-invisibility('.visible-lg');
@include responsive-visibility('.visible-lg');
@include responsive-invisibility('.hidden-lg');


// Content specific fixes
// -----------------------------------------------------------------------------

.navbar-collapse {
  border-top: 0;
  box-shadow: none;
  width: auto;

  &.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0; // Override default setting
  }

  &.in {
    overflow-y: visible;
  }

  // Undo the collapse side padding for navbars with containers to ensure
  // alignment of right-aligned contents.
  .navbar-fixed-top &,
  .navbar-static-top &,
  .navbar-fixed-bottom & {
    padding-left: 0;
    padding-right: 0;
  }
}

.navbar-nav {
  float: left;
  margin: 0;

  > li {
    float: left;

    > a {
      padding-bottom: $navbar-padding-vertical;
      padding-top: $navbar-padding-vertical;
    }
  }
}

.navbar-toggle {
  display: none;
}