1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

expand grid system options table to include column widths, gutter widths, large desktop media query, and container widths (fixes #8733)

This commit is contained in:
Mark Otto 2013-07-28 22:21:16 -07:00
parent bcc6fe5b2b
commit 774f173a18

View file

@ -91,16 +91,20 @@ base_url: "../"
<tr> <tr>
<th></th> <th></th>
<th> <th>
Tiny grid Tiny devices
<small>Phones (&lt;480px)</small> <small>Phones (&lt;480px)</small>
</th> </th>
<th> <th>
Small grid Small devices
<small>Tablets (&lt;768px)</small> <small>Tablets (&lt;768px)</small>
</th> </th>
<th> <th>
Medium-large grid Medium devices
<small>Desktops (&gt;768px)</small> <small>Desktops (&gt;992px)</small>
</th>
<th>
Large devices
<small>Desktops (&gt;1200px)</small>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -108,31 +112,49 @@ base_url: "../"
<tr> <tr>
<th>Grid behavior</th> <th>Grid behavior</th>
<td>Horizontal at all times</td> <td>Horizontal at all times</td>
<td colspan="2">Collapsed to start, horizontal above breakpoints</td> <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th>Max container width</th>
<td>None (auto)</td>
<td>728px</td>
<td>940px</td>
<td>1170px</td>
</tr> </tr>
<tr> <tr>
<th>Class prefix</th> <th>Class prefix</th>
<td><code>.col-</code></td> <td><code>.col-</code></td>
<td><code>.col-sm-</code></td> <td><code>.col-sm-</code></td>
<td><code>.col-lg-</code></td> <td colspan="2"><code>.col-lg-</code></td>
</tr> </tr>
<tr> <tr>
<th># of columns</th> <th># of columns</th>
<td colspan="3">12</td> <td colspan="4">12</td>
</tr>
<tr>
<th>Max column width</th>
<td>Auto</td>
<td>~60px</td>
<td>~78px</td>
<td>~98px</td>
</tr>
<tr>
<th>Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td>
</tr> </tr>
<tr> <tr>
<th>Nestable</th> <th>Nestable</th>
<td colspan="3">Yes</td> <td colspan="4">Yes</td>
</tr> </tr>
<tr> <tr>
<th>Offsets</th> <th>Offsets</th>
<td colspan="2" class="text-muted">N/A</td> <td colspan="2" class="text-muted">N/A</td>
<td>Yes</td> <td colspan="2">Yes</td>
</tr> </tr>
<tr> <tr>
<th>Column ordering</th> <th>Column ordering</th>
<td class="text-muted">N/A</td> <td class="text-muted">N/A</td>
<td colspan="2">Yes</td> <td colspan="3">Yes</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>