rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

clarify more grid stuff, specifically 100% fluid designs; fixes #10711

Browse Source
This commit is contained in:
Mark Otto 2013-10-13 19:36:39 -07:00
parent 950453db43
commit f660bd4205
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css.html
View File

@ -79,10 +79,16 @@ base_url: "../"
<li>Use rows to create horizontal groups of columns.</li>
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
<li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
</ul>
<p>Look to the examples for applying these principles to your code.</p>
<div class="bs-callout bs-callout-info">
<h4>Grids and full-width layouts</h4>
<p>Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with <code>padding: 0 15px;</code> to offset the <code>margin: 0 -15px;</code> used on <code>.row</code>s.</p>
</div>
<h3 id="grid-media-queries">Media queries</h3>
<p>We use the following media queries in our LESS files to create the key breakpoints in our grid system.</p>
{% highlight css %}