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

Add max-width 100% and max-height 100% utilities (#21221)

Browse Source
This commit is contained in:
Mark Otto 2016-11-27 16:31:31 -08:00 committed by GitHub
parent 5eddb0b0fd
commit 585516db95
2 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/utilities/sizing-and-positioning.md
View File

@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v
Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes.
{% example html %}
<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%">
<img class="w-100" data-src="holder.js/200px100?text=Width%20%3D%20100%25" alt="Width 100%">
{% endexample %}
{% example html %}
@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and `
<div class="h-100" style="width: 100px; background-color: rgba(0,0,255,0.1);">Full height</div>
</div>
{% endexample %}
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
{% example html %}
<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
{% endexample %}
{% example html %}
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
{% endexample %}

3
scss/utilities/_spacing.scss
View File

@ -3,6 +3,9 @@
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
// Margin and Padding
.mx-auto {