rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

add .row-no-gutters class

Browse Source 
fixes #15180, fixes #19107, fixes #9102, fixes #7368
This commit is contained in:
Mark Otto 2017-07-03 09:18:28 -07:00
parent 2fb0cd598d
commit 48f1482306
3 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/_includes/css/grid.html
View File

@ -306,6 +306,38 @@
{% endhighlight %} {% 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> <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> <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"> <div class="row show-grid">

1
docs/_includes/nav/css.html
View File

@ -20,6 +20,7 @@
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li> <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
<li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li> <li><a href="#grid-example-wrapping">Ex: Column wrapping</a></li>
<li><a href="#grid-responsive-resets">Responsive column resets</a></li> <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
<li><a href="#grid-remove-gutters">Remove gutters</a></li>
<li><a href="#grid-offsetting">Offsetting columns</a></li> <li><a href="#grid-offsetting">Offsetting columns</a></li>
<li><a href="#grid-nesting">Nesting columns</a></li> <li><a href="#grid-nesting">Nesting columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li> <li><a href="#grid-column-ordering">Column ordering</a></li>

10
less/grid.less
View File

@ -40,6 +40,16 @@
.make-row(); .make-row();
} }
.row-no-gutters {
margin-right: 0;
margin-left: 0;
[class*="col-"] {
padding-left: 0;
padding-right: 0;
}
}
// Columns // Columns
// //