diff options
| -rw-r--r-- | css.html | 2 | ||||
| -rw-r--r-- | examples/grid/index.html | 29 |
2 files changed, 30 insertions, 1 deletions
@@ -316,7 +316,7 @@ base_url: "../" <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div> {% endhighlight %} - <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.</p> + <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier. See this in action in <a href="../examples/grid/">the grid example</a>.</p> {% highlight html %} <div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> diff --git a/examples/grid/index.html b/examples/grid/index.html index 239b0d16a..7fc46c684 100644 --- a/examples/grid/index.html +++ b/examples/grid/index.html @@ -109,6 +109,35 @@ <div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div> </div> + <hr> + + <h3>Column clearing</h3> + <p>Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.</p> + <div class="row"> + <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 visible-xs"></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> + + <hr> + + <h3>Offset, push, and pull resets</h3> + <p>Reset offsets, pushes, and pulls at specific breakpoints.</p> + <div class="row"> + <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> + <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> + </div> + <div class="row"> + <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> + <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> + </div> + + </div> <!-- /container --> |