From 4ad2ecf9757ba45fe41a05fb28a84e7dab5dc39f Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 26 Aug 2013 17:58:15 -0700
Subject: [PATCH] Improve upon #9937: Link and put reset column stuff to action
in the grid example
---
css.html | 2 +-
examples/grid/index.html | 29 +++++++++++++++++++++++++++++
2 files changed, 30 insertions(+), 1 deletion(-)
diff --git a/css.html b/css.html
index 77f1bb1ab6..c421f2e5c0 100644
--- a/css.html
+++ b/css.html
@@ -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 239b0d16ae..7fc46c684c 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 -->
--
GitLab