mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
This commit is contained in:
Mark Otto
+39
-29
@@ -30,19 +30,29 @@ Chill? Awesome—keep reading for more information and some code snippets.
|
||||
|
||||
## Auto-layout columns
|
||||
|
||||
As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col`s and you're good to go.
|
||||
As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col-*`s for each breakpoint you need and you're good to go.
|
||||
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,13 +66,13 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col col-md-6">
|
||||
<div class="col-xs-6">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,35 +88,35 @@ Use the flexbox alignment utilities to vertically align columns.
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row flex-items-xs-top">
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-middle">
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-bottom">
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-xs">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,13 +128,13 @@ Use the flexbox alignment utilities to vertically align columns.
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col flex-xs-top">
|
||||
<div class="col-xs flex-xs-top">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col flex-xs-middle">
|
||||
<div class="col-xs flex-xs-middle">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col flex-xs-bottom">
|
||||
<div class="col-xs flex-xs-bottom">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,42 +150,42 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row flex-items-xs-left">
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-center">
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-right">
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-around">
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
<div class="row flex-items-xs-between">
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
<div class="col col-xs-4">
|
||||
<div class="col-xs-4">
|
||||
One of two columns
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+58
-58
@@ -35,13 +35,13 @@ If you're using Bootstrap's compiled CSS, this the example you'll want to start
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-sm-4">
|
||||
<div class="col-sm-4">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="col-sm-4">
|
||||
One of three columns
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="col-sm-4">
|
||||
One of three columns
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,31 +268,31 @@ Using a single set of `.col-md-*` grid classes, you can create a basic grid syst
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
<div class="col-md-1">md-1</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-md-8">md-8</div>
|
||||
<div class="col col-md-4">md-4</div>
|
||||
<div class="col-md-8">md-8</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-md-4">md-4</div>
|
||||
<div class="col col-md-4">md-4</div>
|
||||
<div class="col col-md-4">md-4</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
<div class="col-md-4">md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-md-6">md-6</div>
|
||||
<div class="col col-md-6">md-6</div>
|
||||
<div class="col-md-6">md-6</div>
|
||||
<div class="col-md-6">md-6</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
@@ -305,21 +305,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small
|
||||
{% example html %}
|
||||
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
|
||||
<div class="row">
|
||||
<div class="col col-xs-12 col-md-8">.col .col-xs-12 .col-md-8</div>
|
||||
<div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
|
||||
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
|
||||
<div class="row">
|
||||
<div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
|
||||
<div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
|
||||
<div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
|
||||
<!-- Columns are always 50% wide, on mobile and desktop -->
|
||||
<div class="row">
|
||||
<div class="col col-xs-6">.col .col-xs-6</div>
|
||||
<div class="col col-xs-6">.col .col-xs-6</div>
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
@@ -331,15 +331,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
<div class="col col-xs-6 col-md-4">.col .col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
|
||||
<div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||
<div class="clearfix hidden-sm-up"></div>
|
||||
<div class="col col-xs-6 col-sm-4">.col .col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
@@ -351,9 +351,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-xs-9">.col .col-xs-9</div>
|
||||
<div class="col col-xs-4">.col .col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
|
||||
<div class="col col-xs-6">.col .col-xs-6<br>Subsequent columns continue along the new line.</div>
|
||||
<div class="col-xs-9">.col-xs-9</div>
|
||||
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
|
||||
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
@@ -365,14 +365,14 @@ With the four tiers of grids available you're bound to run into issues where, at
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
|
||||
<div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix hidden-sm-up"></div>
|
||||
|
||||
<div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
|
||||
<div class="col col-xs-6 col-sm-3">.col .col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
@@ -382,13 +382,13 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-sm-5 col-md-6">.col .col-sm-5 .col-md-6</div>
|
||||
<div class="col col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
|
||||
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
|
||||
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
|
||||
<div class="col col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
|
||||
<div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
|
||||
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
@@ -400,15 +400,15 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-md-4">.col-md-4</div>
|
||||
<div class="col col-md-4 offset-md-4">.col-md-4 .offset-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>
|
||||
<div class="row">
|
||||
<div class="col col-md-3 offset-md-3">.col .col-md-3 .offset-md-3</div>
|
||||
<div class="col col-md-3 offset-md-3">.col .col-md-3 .offset-md-3</div>
|
||||
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
|
||||
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-md-6 offset-md-3">.col .col-md-6 .offset-md-3</div>
|
||||
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
</div>
|
||||
@@ -420,14 +420,14 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-sm-9">
|
||||
Level 1: .col .col-sm-9
|
||||
<div class="col-sm-9">
|
||||
Level 1: .col-sm-9
|
||||
<div class="row">
|
||||
<div class="col col-xs-8 col-sm-6">
|
||||
Level 2: .col .col-xs-8 .col-sm-6
|
||||
<div class="col-xs-8 col-sm-6">
|
||||
Level 2: .col-xs-8 .col-sm-6
|
||||
</div>
|
||||
<div class="col col-xs-4 col-sm-6">
|
||||
Level 2: .col .col-xs-4 .col-sm-6
|
||||
<div class="col-xs-4 col-sm-6">
|
||||
Level 2: .col-xs-4 .col-sm-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -442,8 +442,8 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
|
||||
<div class="bd-example-row">
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
<div class="col col-md-9 push-md-3">.col .col-md-9 .push-md-3</div>
|
||||
<div class="col col-md-3 pull-md-9">.col .col-md-3 .pull-md-9</div>
|
||||
<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>
|
||||
{% endexample %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user