diff options
| author | XhmikosR <[email protected]> | 2018-09-18 21:10:47 +0300 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-09-18 21:10:47 +0300 |
| commit | cee8e8653dc009b5d86af4a8e2ad3a5e0688ca4c (patch) | |
| tree | 00c2e6a121842d956438d2a57173860a8caa0bbc /docs/_includes/css/grid.html | |
| parent | f9c666017ec017a9b90f4b2c2aa7dd8b414a6312 (diff) | |
| parent | 9c4c72e31e7316c372ceef9c937ad0cba5ae50e7 (diff) | |
| download | bootstrap-cee8e8653dc009b5d86af4a8e2ad3a5e0688ca4c.tar.xz bootstrap-cee8e8653dc009b5d86af4a8e2ad3a5e0688ca4c.zip | |
Merge remote-tracking branch 'remotes/origin/v3.4.0-dev' into master-xmr-merged
Diffstat (limited to 'docs/_includes/css/grid.html')
| -rw-r--r-- | docs/_includes/css/grid.html | 34 |
1 files changed, 33 insertions, 1 deletions
diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html index 46ed46627..c226ed73c 100644 --- a/docs/_includes/css/grid.html +++ b/docs/_includes/css/grid.html @@ -292,7 +292,7 @@ <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>. See this in action in <a href="../examples/grid/">the grid example</a>.</p> + <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. See this in action in <a href="{{ site.baseurl }}/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> @@ -306,6 +306,38 @@ {% endhighlight %} + <h2 id="grid-remove-gutters">Remove gutters</h2> + <p>Remove the gutters from a row and it's columns with the <code>.row-no-gutters</code> class.</p> + <div class="row row-no-gutters show-grid"> + <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + </div> + <div class="row row-no-gutters show-grid"> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + </div> + <div class="row row-no-gutters show-grid"> + <div class="col-xs-6">.col-xs-6</div> + <div class="col-xs-6">.col-xs-6</div> + </div> +{% highlight html %} +<div class="row row-no-gutters"> + <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> +</div> +<div class="row row-no-gutters"> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> +</div> +<div class="row row-no-gutters"> + <div class="col-xs-6">.col-xs-6</div> + <div class="col-xs-6">.col-xs-6</div> +</div> +{% endhighlight %} + + <h2 id="grid-offsetting">Offsetting columns</h2> <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p> <div class="row show-grid"> |