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

Fixes #17089 a bit

Browse Source
This commit is contained in:
Mark Otto 2016-06-12 21:18:23 -07:00
parent aaad85bc30
commit 7071fe9c1b
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/assets/scss/_responsive-tests.scss
View File

@ -36,6 +36,7 @@
margin-top: .25rem;
}
.responsive-utilities-test .col-xs-6 {
margin-top: .5rem;
margin-bottom: .5rem;
}
.responsive-utilities-test span {

19
docs/layout/responsive-utilities.md
View File

@ -188,6 +188,9 @@ Green checkmarks indicate the element **is visible** in your current viewport.
<span class="hidden-lg-down not-visible">Large or narrower</span>
</div>
</div>
<hr>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
<span class="hidden-xs-down visible">&#10004; Visible on small or wider</span>
@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport.
<span class="hidden-xl-up not-visible">Extra large</span>
</div>
</div>
<hr>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-3">
<div class="col-xs-6 col-sm-4">
<span class="hidden-sm-up visible">&#10004; Your viewport is exactly extra small</span>
<span class="hidden-xs-down not-visible">Your viewport is NOT exactly extra small</span>
</div>
<div class="col-xs-6 col-sm-3">
<div class="col-xs-6 col-sm-4">
<span class="hidden-xs-down hidden-md-up visible">&#10004; Your viewport is exactly small</span>
<span class="hidden-sm-only not-visible">Your viewport is NOT exactly small</span>
</div>
<div class="col-xs-6 col-sm-3">
<div class="col-xs-6 col-sm-4">
<span class="hidden-sm-down hidden-lg-up visible">&#10004; Your viewport is exactly medium</span>
<span class="hidden-md-only not-visible">Your viewport is NOT exactly medium</span>
</div>
<div class="col-xs-6 col-sm-3">
</div>
<div class="row responsive-utilities-test visible-on">
<div class="col-xs-6 col-sm-4">
<span class="hidden-md-down hidden-xl-up visible">&#10004; Your viewport is exactly large</span>
<span class="hidden-lg-only not-visible">Your viewport is NOT exactly large</span>
</div>
<div class="col-xs-6 col-sm-3">
<div class="col-xs-6 col-sm-4">
<span class="hidden-lg-down visible">&#10004; Your viewport is exactly extra large</span>
<span class="hidden-xl-only not-visible">Your viewport is NOT exactly extra large</span>
</div>