Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

kedudukan

Gunakan utiliti trengkas ini untuk mengkonfigurasi kedudukan elemen dengan cepat.

Nilai kedudukan

Kelas penentududukan pantas tersedia, walaupun ia tidak responsif.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Susun elemen

Susun elemen dengan mudah dengan utiliti kedudukan tepi. Formatnya ialah {property}-{position}.

Di mana harta adalah salah satu daripada:

  • toptop- untuk kedudukan menegak
  • start- untuk kedudukan mendatar left(dalam LTR)
  • bottombottom- untuk kedudukan menegak
  • end- untuk kedudukan mendatar right(dalam LTR)

Di mana kedudukan adalah salah satu daripada:

  • 0- untuk 0kedudukan tepi
  • 50- untuk 50%kedudukan tepi
  • 100- untuk 100%kedudukan tepi

(Anda boleh menambah lebih banyak nilai kedudukan dengan menambahkan entri pada $position-valuespembolehubah peta Sass.)

html
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-50"></div>
  <div class="position-absolute bottom-50 end-50"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Elemen tengah

Selain itu, anda juga boleh memusatkan elemen dengan kelas utiliti transformasi .translate-middle.

Kelas ini menggunakan transformasi translateX(-50%)dan translateY(-50%)pada elemen yang, dalam kombinasi dengan utiliti kedudukan tepi, membolehkan anda memusatkan elemen secara mutlak.

html
<div class="position-relative">
  <div class="position-absolute top-0 start-0 translate-middle"></div>
  <div class="position-absolute top-0 start-50 translate-middle"></div>
  <div class="position-absolute top-0 start-100 translate-middle"></div>
  <div class="position-absolute top-50 start-0 translate-middle"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 start-100 translate-middle"></div>
  <div class="position-absolute top-100 start-0 translate-middle"></div>
  <div class="position-absolute top-100 start-50 translate-middle"></div>
  <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

Dengan menambah .translate-middle-xatau .translate-middle-ykelas, elemen boleh diletakkan hanya dalam arah mendatar atau menegak.

html
<div class="position-relative">
  <div class="position-absolute top-0 start-0"></div>
  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
  <div class="position-absolute top-0 end-0"></div>
  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
  <div class="position-absolute top-50 start-50 translate-middle"></div>
  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
  <div class="position-absolute bottom-0 start-0"></div>
  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
  <div class="position-absolute bottom-0 end-0"></div>
</div>

Contoh

Berikut ialah beberapa contoh kehidupan sebenar bagi kelas ini:

html
<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<button type="button" class="btn btn-dark position-relative">
  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>

<button type="button" class="btn btn-primary position-relative">
  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

Anda boleh menggunakan kelas ini dengan komponen sedia ada untuk mencipta yang baharu. Ingat bahawa anda boleh melanjutkan fungsinya dengan menambahkan entri pada $position-valuespembolehubah.

html
<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
  <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
  <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>

Sass

Peta

Nilai utiliti kedudukan lalai diisytiharkan dalam peta Sass, kemudian digunakan untuk menjana utiliti kami.

$position-values: (
  0: 0,
  50: 50%,
  100: 100%
);

API Utiliti

Utiliti kedudukan diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.

    "position": (
      property: position,
      values: static relative absolute fixed sticky
    ),
    "top": (
      property: top,
      values: $position-values
    ),
    "bottom": (
      property: bottom,
      values: $position-values
    ),
    "start": (
      property: left,
      class: start,
      values: $position-values
    ),
    "end": (
      property: right,
      class: end,
      values: $position-values
    ),
    "translate-middle": (
      property: transform,
      class: translate-middle,
      values: (
        null: translate(-50%, -50%),
        x: translateX(-50%),
        y: translateY(-50%),
      )
    ),