Skip to content
GitLab
Explore
Projects
Groups
Snippets
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Bootstrap
bootstrap
Commits
2d243086
Commit
2d243086
authored
7 years ago
by
Mark Otto
Committed by
Mark Otto
7 years ago
Browse files
Options
Download
Email Patches
Plain Diff
clean up mixin docs
parent
4ab06ca4
8 merge requests
!28721
Hot test
,
!27561
Adds font-weight-medium to font weight classes
,
!22391
V4 dev
,
!22598
test
,
!25326
Adjust examples
,
!23995
Add back cursor: pointer for .btn-link
,
!23178
Spinner
,
!17021
v4
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
docs/layout/grid.md
+6
-48
docs/layout/grid.md
with
6 additions
and
48 deletions
+6
-48
docs/layout/grid.md
+
6
-
48
View file @
2d243086
...
...
@@ -630,58 +630,16 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
{% highlight scss %}
// Creates a wrapper for a series of columns
@mixin 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);
}
}
}
@include make-row($gutters: $grid-gutter-widths);
// Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative;
// 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);
}
@include make-col-ready($gutters: $grid-gutter-widths);
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $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);
}
@include make-col-offset($size, $columns: $grid-columns);
@include make-col-push($size, $columns: $grid-columns);
@include make-col-pull($size, $columns: $grid-columns);
{% endhighlight %}
### Example usage
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Explore
Projects
Groups
Snippets