mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Rename .flex-xs-* and .flex-items-xs-* to .flex-* and .flex-items-* (#21218)

Browse Source 
* Clean up _flex.scss a little

This commit just cleans up the formating of _flex.scss by changing
it so that it uses a single `@include media-breakpoint-up` instead
of multiple. It also aligns all of the CSS properties so it looks
a bit nicer.

* Remove `-xs` from flex classes
This commit is contained in:
Starsam80
2016-11-27 16:19:27 -07:00
committed by Mark Otto
parent 94be2d2254
commit 8d031090d0
5 changed files with 66 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/layout/flexbox-grid.md
+14 -14
View File
@@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-xs-top">
<div class="row flex-items-top">
<div class="col-xs">
One of three columns
</div>
@@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns
</div>
</div>
<div class="row flex-items-xs-middle">
<div class="row flex-items-middle">
<div class="col-xs">
One of three columns
</div>
@@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns
</div>
</div>
<div class="row flex-items-xs-bottom">
<div class="row flex-items-bottom">
<div class="col-xs">
One of three columns
</div>
@@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-xs-top">
<div class="col-xs flex-top">
One of three columns
</div>
<div class="col-xs flex-xs-middle">
<div class="col-xs flex-middle">
One of three columns
</div>
<div class="col-xs flex-xs-bottom">
<div class="col-xs flex-bottom">
One of three columns
</div>
</div>
@@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-xs-left">
<div class="row flex-items-left">
<div class="col-4">
One of two columns
</div>
@@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-center">
<div class="row flex-items-center">
<div class="col-4">
One of two columns
</div>
@@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-right">
<div class="row flex-items-right">
<div class="col-4">
One of two columns
</div>
@@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-around">
<div class="row flex-items-around">
<div class="col-4">
One of two columns
</div>
@@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-between">
<div class="row flex-items-between">
<div class="col-4">
One of two columns
</div>
@@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-xs-unordered">
<div class="col-xs flex-unordered">
First, but unordered
</div>
<div class="col-xs flex-xs-last">
<div class="col-xs flex-last">
Second, but last
</div>
<div class="col-xs flex-xs-first">
<div class="col-xs flex-first">
Third, but first
</div>
</div>