forked from twbs/bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request twbs#13203 from twbs/equal-height-experiment
Add flexbox-based equal-height grid columns as an experimental example
- Loading branch information
Showing
4 changed files
with
168 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
docs/examples/equal-height-columns/equal-height-columns.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
/* | ||
* Row with equal height columns | ||
* -------------------------------------------------- | ||
*/ | ||
.row-eq-height { | ||
display: -webkit-box; | ||
display: -webkit-flex; | ||
display: -ms-flexbox; | ||
display: flex; | ||
} | ||
|
||
/* | ||
* Styles copied from the Grid example to make grid rows & columns visible. | ||
*/ | ||
.container { | ||
padding-right: 15px; | ||
padding-left: 15px; | ||
} | ||
|
||
h4 { | ||
margin-top: 25px; | ||
} | ||
.row { | ||
margin-bottom: 20px; | ||
} | ||
.row .row { | ||
margin-top: 10px; | ||
margin-bottom: 0; | ||
} | ||
[class*="col-"] { | ||
padding-top: 15px; | ||
padding-bottom: 15px; | ||
background-color: #eee; | ||
background-color: rgba(86,61,124,.15); | ||
border: 1px solid #ddd; | ||
border: 1px solid rgba(86,61,124,.2); | ||
} | ||
|
||
/* | ||
* Callout styles copied from Bootstrap's main docs. | ||
*/ | ||
/* Common styles for all types */ | ||
.bs-callout { | ||
padding: 20px; | ||
margin: 20px 0; | ||
border-left: 3px solid #eee; | ||
} | ||
.bs-callout h4 { | ||
margin-top: 0; | ||
margin-bottom: 5px; | ||
} | ||
.bs-callout p:last-child { | ||
margin-bottom: 0; | ||
} | ||
.bs-callout code { | ||
background-color: #fff; | ||
border-radius: 3px; | ||
} | ||
/* Variations */ | ||
.bs-callout-danger { | ||
background-color: #fdf7f7; | ||
border-color: #d9534f; | ||
} | ||
.bs-callout-danger h4 { | ||
color: #d9534f; | ||
} | ||
.bs-callout-warning { | ||
background-color: #fcf8f2; | ||
border-color: #f0ad4e; | ||
} | ||
.bs-callout-warning h4 { | ||
color: #f0ad4e; | ||
} | ||
.bs-callout-info { | ||
background-color: #f4f8fa; | ||
border-color: #5bc0de; | ||
} | ||
.bs-callout-info h4 { | ||
color: #5bc0de; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<meta name="description" content=""> | ||
<meta name="author" content=""> | ||
<link rel="icon" href="../../assets/ico/favicon.ico"> | ||
|
||
<title>Equal Height Columns Example for Bootstrap</title> | ||
|
||
<!-- Bootstrap core CSS --> | ||
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> | ||
|
||
<!-- Custom styles for this template --> | ||
<link href="equal-height-columns.css" rel="stylesheet"> | ||
|
||
<!-- Just for debugging purposes. Don't actually copy this line! --> | ||
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> | ||
|
||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | ||
<!--[if lt IE 9]> | ||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | ||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | ||
<![endif]--> | ||
</head> | ||
|
||
<body> | ||
<div class="container"> | ||
|
||
<div class="page-header"> | ||
<h1>Bootstrap equal-height columns experiment</h1> | ||
<p class="lead">A simple experiment that adds flexbox-based equal-height columns to Bootstrap's grid system.</p> | ||
</div> | ||
|
||
<h3>Normal row (with unequal-height columns)</h3> | ||
<p>For comparison, here's a normal row, <strong>without</strong> <code>.row-eq-height</code>.</p> | ||
<div class="row"> | ||
<div class="col-xs-4">.row > .col-xs-4</div> | ||
<div class="col-xs-4">.row > .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div> | ||
<div class="col-xs-4">.row > .col-xs-4</div> | ||
</div> | ||
|
||
|
||
<h3>Row with equal-height columns</h3> | ||
<p>This row uses the custom <code>.row-eq-height</code> class defined in <a href="equal-height-columns.css">this example's CSS</a> to make all of its columns automatically be of equal height.</p> | ||
<p>All of the columns will stretch vertically to occupy the same height as the tallest column.</p> | ||
|
||
<div class="row row-eq-height"> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4</div> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4</div> | ||
</div> | ||
|
||
<div class="bs-callout bs-callout-danger"> | ||
<h4>Warning: Browser compatibility</h4> | ||
<p>The <code>.row-eq-height</code> class uses <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">CSS3's flexbox layout mode</a>, which is not supported in Internet Explorer 9 and below.</p> | ||
<p>In any unsupported browser, the <code>.row-eq-height</code> class will have no effect.</p> | ||
<p>For more info on browser support for flexbox, please consult <a href="http://caniuse.com/flexbox">"Can I use..."</a>.</p> | ||
</div> | ||
<div class="bs-callout bs-callout-warning"> | ||
<h4>Warning: Changes column wrapping behavior</h4> | ||
<p>If you have put than 12 columns in one <code>.row-eq-height</code>, the columns will be forced to shrink into a single row, instead of wrapping onto a new line as they normally would.</p> | ||
</div> | ||
|
||
<h3>Equal-height row with more than 12 columns</h3> | ||
<div class="row row-eq-height"> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4</div> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4</div> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4</div> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4<br>This and subsequent columns would normally have wrapped onto a new line,<br>if not for <code>.row-eq-height</code>.</div> | ||
<div class="col-xs-4">.row.row-eq-height > .col-xs-4<br></div> | ||
</div> | ||
|
||
|
||
</div> <!-- /container --> | ||
|
||
|
||
</body> | ||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.