diff --git a/assets/css/docs.css b/assets/css/docs.css index 8783e81498..307e8d07e3 100644 --- a/assets/css/docs.css +++ b/assets/css/docs.css @@ -545,6 +545,36 @@ body { /* Responsive docs -------------------------------------------------- */ +/* Responsive (scrollable) doc tables */ +@media (max-width: 768px) { + .bs-table-scrollable { + width: 100%; + overflow-y: hidden; + overflow-x: scroll; + border: 1px solid #ddd; + } + .bs-table-scrollable .bs-table { + margin-bottom: 0; + border: 0; + } + .bs-table-scrollable .bs-table th, + .bs-table-scrollable .bs-table td { + white-space: nowrap; + } + .bs-table-scrollable .bs-table th:first-child, + .bs-table-scrollable .bs-table td:first-child { + border-left: 0; + } + .bs-table-scrollable .bs-table th:last-child, + .bs-table-scrollable .bs-table td:last-child { + border-right: 0; + } + .bs-table-scrollable .bs-table tr:last-child th, + .bs-table-scrollable .bs-table tr:last-child td { + border-bottom: 0; + } +} + /* Related: responsive utilities tables */ .table code { font-size: 13px; diff --git a/css.html b/css.html index 0c41d4af01..35148bcaba 100644 --- a/css.html +++ b/css.html @@ -78,56 +78,58 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
-- | - Tiny grid - Phones (<480px) - | -- Small grid - Tablets (<768px) - | -- Medium-large grid - Destkops (>768px) - | -
---|---|---|---|
Grid behavior | -Horizontal at all times | -Collapsed to start, horizontal above breakpoints | -|
Class prefix | -.col- |
- .col-sm- |
- .col-lg- |
-
# of columns | -12 | -||
Nestable | -Yes | -||
Offsets | -N/A | -Yes | -|
Column ordering | -N/A | -Yes | -
+ | + Tiny grid + Phones (<480px) + | ++ Small grid + Tablets (<768px) + | ++ Medium-large grid + Destkops (>768px) + | +
---|---|---|---|
Grid behavior | +Horizontal at all times | +Collapsed to start, horizontal above breakpoints | +|
Class prefix | +.col- |
+ .col-sm- |
+ .col-lg- |
+
# of columns | +12 | +||
Nestable | +Yes | +||
Offsets | +N/A | +Yes | +|
Column ordering | +N/A | +Yes | +
Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.