Κόλλα

Φτιάξτε εύκολα ένα στοιχείο τόσο φαρδύ ή τόσο ψηλό με τις βοηθητικές μας εφαρμογές πλάτους και ύψους.

Σε αυτήν την σελίδα

Σε σχέση με τον γονέα

Τα βοηθητικά προγράμματα πλάτους και ύψους δημιουργούνται από το βοηθητικό πρόγραμμα API στο _utilities.scss. Περιλαμβάνει υποστήριξη για 25%, 50%, 75%, 100%και autoαπό προεπιλογή. Τροποποιήστε αυτές τις τιμές καθώς χρειάζεται να δημιουργήσετε διαφορετικά βοηθητικά προγράμματα εδώ.

Πλάτος 25%

Πλάτος 50%

Πλάτος 75%

Πλάτος 100%

Αυτόματο πλάτος

html

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

Ύψος 25%

Ύψος 50%

Ύψος 75%

Ύψος 100%

Αυτόματο ύψος

html

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

Μπορείτε επίσης να χρησιμοποιήσετε max-width: 100%;και max-height: 100%;βοηθητικά προγράμματα όπως απαιτείται.

html

<img src="..." class="mw-100" alt="...">

Μέγιστο ύψος 100%

html

<div style="height: 100px; background-color: rgba(255,0,0,.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div>
</div>

Σε σχέση με το παράθυρο προβολής

Μπορείτε επίσης να χρησιμοποιήσετε βοηθητικά προγράμματα για να ορίσετε το πλάτος και το ύψος σε σχέση με τη θύρα προβολής.

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

Sass

Utilities API

Τα βοηθητικά προγράμματα ταξινόμησης μεγέθους δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.

    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-width": (
      property: max-width,
      class: mw,
      values: (100: 100%)
    ),
    "viewport-width": (
      property: width,
      class: vw,
      values: (100: 100vw)
    ),
    "min-viewport-width": (
      property: min-width,
      class: min-vw,
      values: (100: 100vw)
    ),
    "height": (
      property: height,
      class: h,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    "max-height": (
      property: max-height,
      class: mh,
      values: (100: 100%)
    ),
    "viewport-height": (
      property: height,
      class: vh,
      values: (100: 100vh)
    ),
    "min-viewport-height": (
      property: min-height,
      class: min-vh,
      values: (100: 100vh)
    ),