S
S
Sergei Gromov2016-02-28 13:34:00
css
Sergei Gromov, 2016-02-28 13:34:00

Does anyone have a bootstrap-grid mixin for sass?

I tried to pull the mixin folder from the repository, but everything is going wrong for me

.block{
    @include make-md-column(4);
    @include make-lg-column(6);
}

the output is duplicates, for example, the .block block
.block {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .block {
    float: left;
    width: 33.33333%;
  }
}

@media (min-width: 1200px) {
  .block {
    float: left;
    width: 50%;
  }
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrey Khokhlov, 2016-02-28
@andrhohlov

Use version 4 https://github.com/twbs/bootstrap/tree/v4-dev/scss
Grids and breakpoints

.block {
  @include make-col;
  @include make-col-span(8);

  @include media-breakpoint-up(md) {
    @include make-col-span(4);
  }

}

F
ForestEsprit, 2016-04-27
@ForestEsprit

v4-alpha.getbootstrap.com/layout/grid/#example-usage

// 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();
}

// Make the element grid-ready (applying everything but the width)
@mixin make-col($gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}

// Set a width (to be used in or out of media queries)
@mixin make-col-span($columns) {
  width: percentage(($columns / $grid-columns));
}

// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($columns) {
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns) {
  left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns) {
  right: percentage(($columns / $grid-columns));
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question