Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Position

Verwenden Sie diese Kurzbefehle, um die Position eines Elements schnell zu konfigurieren.

Positionswerte

Kurse zur schnellen Positionierung sind verfügbar, reagieren jedoch nicht.

<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>

Elemente anordnen

Ordnen Sie Elemente einfach mit den Dienstprogrammen zur Kantenpositionierung an. Das Format ist {property}-{position}.

Wo Eigentum ist eines von:

  • top- für die vertikale topPosition
  • start- für die horizontale leftPosition (in LTR)
  • bottom- für die vertikale bottomPosition
  • end- für die horizontale rightPosition (in LTR)

Wo Position ist eine von:

  • 0- für 0Kantenlage
  • 50- für 50%Kantenlage
  • 100- für 100%Kantenlage

(Sie können weitere Positionswerte hinzufügen, indem Sie Einträge zur $position-valuesKartenvariablen Sass hinzufügen.)

<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>

Mittelelemente

Darüber hinaus können Sie die Elemente auch mit der transform Utility-Klasse zentrieren .translate-middle.

Diese Klasse wendet die Transformationen translateX(-50%)und translateY(-50%)auf das Element an, was Ihnen in Kombination mit den Dienstprogrammen zur Kantenpositionierung ermöglicht, ein Element absolut zu zentrieren.

<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>

Durch Hinzufügen von .translate-middle-xoder .translate-middle-yKlassen können Elemente nur in horizontaler oder vertikaler Richtung positioniert werden.

<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>

Beispiele

Hier sind einige reale Beispiele dieser Klassen:

<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 bi bi-caret-down-fill" 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>

Sie können diese Klassen mit vorhandenen Komponenten verwenden, um neue zu erstellen. Denken Sie daran, dass Sie ihre Funktionalität erweitern können, indem Sie der $position-valuesVariablen Einträge hinzufügen.

<div class="position-relative m-4">
  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" 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

Karten

Standard-Positionsnutzenwerte werden in einer Sass-Karte deklariert und dann verwendet, um unsere Dienstprogramme zu generieren.

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

Dienstprogramme-API

Positionsdienstprogramme werden in unserer Hilfsprogramm-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.

    "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%),
      )
    ),