root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Update grid mixins code snippets in the docs to include flexbox changes

This commit is contained in:
Mark Otto 2016-02-06 00:23:52 -08:00
parent 42c52a278f
commit 29dcf9ac62
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/layout/grid.md
View File

@ -164,23 +164,40 @@ 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($gutter: $grid-gutter-width) { @mixin make-row($gutter: $grid-gutter-width) {
@if $enable-flex {
display: flex;
flex-wrap: wrap;
} @else {
@include clearfix();
}
margin-left: ($gutter / -2); margin-left: ($gutter / -2);
margin-right: ($gutter / -2); margin-right: ($gutter / -2);
@include clearfix();
} }
// Make the element grid-ready (applying everything but the width) // Make the element grid-ready (applying everything but the width)
@mixin make-col($gutter: $grid-gutter-width) { @mixin make-col($gutter: $grid-gutter-width) {
position: relative; position: relative;
@if $enable-flex {
flex: 1;
} @else {
float: left; float: left;
}
min-height: 1px; min-height: 1px;
padding-left: ($gutter / 2); padding-left: ($gutter / 2);
padding-right: ($gutter / 2); padding-right: ($gutter / 2);
} }
// Set a width (to be used in or out of media queries) @mixin make-col-span($size, $columns: $grid-columns) {
@mixin make-col-span($columns) { // Set a width (to be used in or out of media queries)
width: percentage(($columns / $grid-columns)); @if $enable-flex {
flex: 0 0 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);
} @else {
width: percentage($size / $columns);
}
} }
// Get fancy by offsetting, or changing the sort order // Get fancy by offsetting, or changing the sort order