rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Drop offsets and push/pull for new order variants

Browse Source
This commit is contained in:
Mark Otto 2017-06-29 22:33:33 -07:00 committed by Mark Otto
parent 8b34a0e172
commit 4982926dcf
3 changed files with 13 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/4.0/layout/grid.md
View File

@ -520,19 +520,19 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
### Flex order ### Flex order
Use flexbox utilities for controlling the **visual order** of your content. Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
<div class="bd-example-row"> <div class="bd-example-row">
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col order-0"> <div class="col">
First, but unordered First, but unordered
</div> </div>
<div class="col order-last"> <div class="col order-12">
Second, but last Second, but last
</div> </div>
<div class="col order-first"> <div class="col order-1">
Third, but first Third, but first
</div> </div>
</div> </div>
@ -542,33 +542,21 @@ Use flexbox utilities for controlling the **visual order** of your content.
### Offsetting columns ### Offsetting columns
Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns. With the move to flexbox in v4, we no longer have v3's style of offset classes. Instead, use margin utilities like `.mr-auto` to force sibling columns away from one another.
<div class="bd-example-row"> <div class="bd-example-row">
{% example html %} {% example html %}
<div class="row"> <div class="row">
<div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> <div class="col-auto mr-auto">.col-auto .mr-auto</div>
</div> <div class="col-auto">.col-auto</div>
{% endexample %}
</div>
### Push and pull
Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.
<div class="bd-example-row">
{% example html %}
<div class="row">
<div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
<div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div> </div>
{% endexample %} {% endexample %}
</div> </div>

17
scss/mixins/_grid-framework.scss
View File

@ -46,20 +46,9 @@
} }
} }
@each $modifier in (pull, push) { @for $i from 1 through $columns {
@for $i from 0 through $columns { .order#{$infix}-#{$i} {
.#{$modifier}#{$infix}-#{$i} { order: $i
@include make-col-modifier($modifier, $i, $columns)
}
}
}
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
.offset#{$infix}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
} }
} }
} }

4
scss/utilities/_flex.scss
View File

@ -6,10 +6,6 @@
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.order#{$infix}-first { order: -1; }
.order#{$infix}-last { order: 1; }
.order#{$infix}-0 { order: 0; }
.flex#{$infix}-row { flex-direction: row !important; } .flex#{$infix}-row { flex-direction: row !important; }
.flex#{$infix}-column { flex-direction: column !important; } .flex#{$infix}-column { flex-direction: column !important; }
.flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }