From b57396944a39b21571848728b6ad479cd50537cd Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 27 Mar 2014 13:57:50 -0700 Subject: Add equal-height grid columns as an experimental example. Based on @pete-otaqui's work from #11851 --- docs/examples/equal-height-columns/index.html | 81 +++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 docs/examples/equal-height-columns/index.html (limited to 'docs/examples/equal-height-columns/index.html') diff --git a/docs/examples/equal-height-columns/index.html b/docs/examples/equal-height-columns/index.html new file mode 100644 index 000000000..8be0837f9 --- /dev/null +++ b/docs/examples/equal-height-columns/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + + Equal Height Columns Example for Bootstrap + + + + + + + + + + + + + + + +
+ +
+

Bootstrap equal-height columns experiment

+

A simple experiment that adds flexbox-based equal-height columns to Bootstrap's grid system.

+
+ +

Normal row (with unequal-height columns)

+

For comparison, here's a normal row, without .row-eq-height.

+
+
.row > .col-xs-4
+
.row > .col-xs-4
this is
a much
taller
column
than the others
+
.row > .col-xs-4
+
+ + +

Row with equal-height columns

+

This row uses the custom .row-eq-height class defined in this example's CSS to make all of its columns automatically be of equal height.

+

All of the columns will stretch vertically to occupy the same height as the tallest column.

+ +
+
.row.row-eq-height > .col-xs-4
+
.row.row-eq-height > .col-xs-4
this is
a much
taller
column
than the others
+
.row.row-eq-height > .col-xs-4
+
+ +
+

Warning: Browser compatibility

+

The .row-eq-height class uses CSS3's flexbox layout mode, which is not supported in Internet Explorer 9 and below.

+

In any unsupported browser, the .row-eq-height class will have no effect.

+

For more info on browser support for flexbox, please consult "Can I use...".

+
+
+

Warning: Changes column wrapping behavior

+

If you have put than 12 columns in one .row-eq-height, the columns will be forced to shrink into a single row, instead of wrapping onto a new line as they normally would.

+
+ +

Equal-height row with more than 12 columns

+
+
.row.row-eq-height > .col-xs-4
+
.row.row-eq-height > .col-xs-4
+
.row.row-eq-height > .col-xs-4
+
.row.row-eq-height > .col-xs-4
This and subsequent columns would normally have wrapped onto a new line,
if not for .row-eq-height.
+
.row.row-eq-height > .col-xs-4
+
+ + +
+ + + + -- cgit v1.2.3