mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-02 14:24:19 +01:00
cae7dee236
The validator doesn't choke anymore on this and even though it's not spec compliant, it's needed for some IE versions. So until we move favicon.ico in root, this should do the job.
86 lines
4.1 KiB
HTML
86 lines
4.1 KiB
HTML
<!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="shortcut 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 these 2 lines! -->
|
|
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
|
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/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 more 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>
|