diff options
| author | Mark Otto <[email protected]> | 2013-08-15 11:47:45 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-15 11:47:45 -0700 |
| commit | 49e95f2bcfd71e12b0c3d45c6019482288cbebd9 (patch) | |
| tree | b9c76a0fcc11d8296424ca3acbdd41ad90716b08 | |
| parent | 3a7ddae39e5e7b75651c22d0ce95a473d87aba2f (diff) | |
| download | bootstrap-49e95f2bcfd71e12b0c3d45c6019482288cbebd9.tar.xz bootstrap-49e95f2bcfd71e12b0c3d45c6019482288cbebd9.zip | |
add clearfix mention to another grid example and clear up examples
| -rw-r--r-- | css.html | 22 |
1 files changed, 9 insertions, 13 deletions
@@ -291,36 +291,32 @@ base_url: "../" <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p> <div class="bs-docs-grid"> <div class="row show-grid"> - <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .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-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div> </div> <div class="row show-grid"> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <!-- Optional: clear the XS cols if their content doesn't match in height --> + <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div> - <div class="row show-grid"> - <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> - <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> - </div> </div> {% highlight html %} <div class="row"> - <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div> - <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .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-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> + <!-- Optional: clear the XS cols if their content doesn't match in height --> + <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div> -<div class="row"> - <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> - <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div> -</div> {% endhighlight %} - <div class="bs-callout bs-callout-danger"> + <div class="bs-callout bs-callout-info"> <h4>Need more examples?</h4> <p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p> <p><a class="btn btn-danger" target="_blank" href="http://examples.getbootstrap.com/grid/">More grid examples</a></p> |