rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

clean up mixin docs

Browse Source
This commit is contained in:
Mark Otto 2017-03-25 12:00:34 -07:00 committed by Mark Otto
parent 4ab06ca453
commit 2d243086c9
1 changed files with 6 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
docs/layout/grid.md
View File

@ -630,58 +630,16 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
{% highlight scss %} {% highlight scss %}
// Creates a wrapper for a series of columns // Creates a wrapper for a series of columns
@mixin make-row($gutters: $grid-gutter-widths) { @include make-row($gutters: $grid-gutter-widths);
display: flex;
flex-wrap: wrap;
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
}
// Make the element grid-ready (applying everything but the width) // Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($gutters: $grid-gutter-widths) { @include make-col-ready($gutters: $grid-gutter-widths);
position: relative; @include make-col($size, $columns: $grid-columns);
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
min-height: 1px; // Prevent collapsing
@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}
@mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 percentage($size / $columns);
width: percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns);
}
// Get fancy by offsetting, or changing the sort order // Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($size, $columns: $grid-columns) { @include make-col-offset($size, $columns: $grid-columns);
margin-left: percentage($size / $columns); @include make-col-push($size, $columns: $grid-columns);
} @include make-col-pull($size, $columns: $grid-columns);
@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage($size / $columns), auto);
}
@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage($size / $columns), auto);
}
{% endhighlight %} {% endhighlight %}
### Example usage ### Example usage