in English

Navigationsleiste

Dokumentation und Beispiele für den leistungsstarken, reaktionsschnellen Navigations-Header von Bootstrap, die Navigationsleiste. Beinhaltet Unterstützung für Branding, Navigation, Minimierungs-Plugin und mehr.

Wie es funktioniert

Folgendes müssen Sie wissen, bevor Sie mit der Navigationsleiste beginnen:

Navbars erfordern eine Umhüllung .navbarmit .navbar-expand{-sm|-md|-lg|-xl}für ansprechende Minimierungs- und Farbschemaklassen .
Navbars und ihre Inhalte sind standardmäßig flüssig. Verwenden Sie optionale Container , um ihre horizontale Breite zu begrenzen.
Verwenden Sie unsere Spacing- und Flex -Utility-Klassen, um den Abstand und die Ausrichtung innerhalb der Navigationsleisten zu steuern.
Navbars reagieren standardmäßig, aber Sie können sie einfach ändern, um dies zu ändern. Das Antwortverhalten hängt von unserem Collapse-JavaScript-Plugin ab.
Navigationsleisten werden beim Drucken standardmäßig ausgeblendet. Erzwingen Sie das Drucken, indem Sie .d-printdie .navbar. Siehe die Display -Utility-Klasse.
Stellen Sie die Zugänglichkeit sicher, indem Sie ein <nav>Element verwenden, oder, wenn Sie ein allgemeineres Element wie ein verwenden <div>, fügen role="navigation"Sie jeder Navigationsleiste ein hinzu, um sie explizit als Orientierungspunkt für Benutzer von Hilfstechnologien zu kennzeichnen.

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Unterstützte Inhalte

Navbars verfügen über eine integrierte Unterstützung für eine Handvoll Unterkomponenten. Wählen Sie je nach Bedarf aus:

.navbar-brandfür Ihren Firmen-, Produkt- oder Projektnamen.
.navbar-navfür eine Navigation in voller Höhe und leichtgewichtig (einschließlich Unterstützung für Dropdowns).
.navbar-togglerzur Verwendung mit unserem Minimierungs-Plug-in und anderen Verhaltensweisen zum Umschalten der Navigation .
.form-inlinefür alle Formularsteuerelemente und Aktionen.
.navbar-textzum Hinzufügen von vertikal zentrierten Textfolgen.
.collapse.navbar-collapsezum Gruppieren und Ausblenden von Navigationsleisteninhalten nach einem übergeordneten Haltepunkt.

Hier ist ein Beispiel aller Unterkomponenten, die in einer responsiven Navigationsleiste mit Lichtdesign enthalten sind, die automatisch am lg(großen) Haltepunkt eingeklappt wird.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

In diesem Beispiel werden die Hilfsklassen Farbe ( bg-light) und Abstand ( my-2, my-lg-0, mr-sm-0, my-sm-0) verwendet.

Marke

Das .navbar-brandkann auf die meisten Elemente angewendet werden, aber ein Anker funktioniert am besten, da einige Elemente möglicherweise Hilfsklassen oder benutzerdefinierte Stile erfordern.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Das Hinzufügen von Bildern zum .navbar-brandwird wahrscheinlich immer benutzerdefinierte Stile oder Dienstprogramme erfordern, um die richtige Größe zu erreichen. Hier sind einige Beispiele zur Veranschaulichung.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

Navbar-Navigationslinks bauen auf unseren .navOptionen mit ihrer eigenen Modifikatorklasse auf und erfordern die Verwendung von Toggler-Klassen für das richtige Responsive-Styling. Die Navigation in Navbars wird auch wachsen, um so viel horizontalen Platz wie möglich einzunehmen, damit Ihre Navbar-Inhalte sicher ausgerichtet bleiben.

Aktive Zustände – mit .active– um anzuzeigen, dass die aktuelle Seite direkt auf .nav-links oder ihre unmittelbar übergeordneten .nav-items angewendet werden kann.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Und da wir Klassen für unsere Navs verwenden, können Sie den listenbasierten Ansatz ganz vermeiden, wenn Sie möchten.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Sie können auch Dropdowns in Ihrer Navigationsleiste verwenden. Dropdown-Menüs erfordern ein Wrapping-Element für die Positionierung, verwenden Sie also unbedingt separate und verschachtelte Elemente für .nav-itemund .nav-linkwie unten gezeigt.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formen

Platzieren Sie verschiedene Formularsteuerelemente und Komponenten innerhalb einer Navigationsleiste mit .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Unmittelbar untergeordnete Elemente von .navbarverwenden Flex-Layout und sind standardmäßig justify-content: space-between. Verwenden Sie nach Bedarf zusätzliche Flex-Dienstprogramme , um dieses Verhalten anzupassen.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Eingangsgruppen funktionieren auch:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Als Teil dieser Navigationsleistenformulare werden auch verschiedene Schaltflächen unterstützt. Dies ist auch eine großartige Erinnerung daran, dass Dienstprogramme für die vertikale Ausrichtung verwendet werden können, um Elemente unterschiedlicher Größe auszurichten.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Text

Navigationsleisten können mit Hilfe von Textschnipsel enthalten .navbar-text. Diese Klasse passt die vertikale Ausrichtung und den horizontalen Abstand für Textzeichenfolgen an.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Mischen und kombinieren Sie es nach Bedarf mit anderen Komponenten und Dienstprogrammen.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Farbschemata

Dank der Kombination von Designklassen und background-colorDienstprogrammen war die Gestaltung der Navigationsleiste noch nie so einfach. Wählen Sie aus .navbar-lightfür die Verwendung mit hellen Hintergrundfarben oder .navbar-darkfür dunkle Hintergrundfarben. Passen Sie dann mit .bg-*Dienstprogrammen an.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Behälter

Obwohl dies nicht erforderlich ist, können Sie eine Navigationsleiste in ein einschließen .container, um sie auf einer Seite zu zentrieren. Oder Sie können einen Container in hinzufügen .navbar, um nur den Inhalt einer festen oder statischen oberen Navigationsleiste zu zentrieren .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Wenn sich der Container in Ihrer Navigationsleiste befindet, wird seine horizontale Polsterung an Haltepunkten entfernt, die niedriger als Ihre angegebene .navbar-expand{-sm|-md|-lg|-xl}Klasse sind. Dadurch wird sichergestellt, dass wir die Polsterung nicht unnötig in unteren Ansichtsfenstern verdoppeln, wenn Ihre Navigationsleiste eingeklappt ist.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Platzierung

Verwenden Sie unsere Positionsdienstprogramme , um Navigationsleisten an nicht statischen Positionen zu platzieren. Wählen Sie „oben fixiert“, „unten fixiert“ oder „oben fixiert“ (scrollt mit der Seite, bis sie ganz oben ist, und bleibt dann dort). Feste Navigationsleisten verwenden position: fixed, was bedeutet, dass sie aus dem normalen Fluss des DOM gezogen werden und möglicherweise benutzerdefiniertes CSS (z. B. padding-topauf dem <body>) erfordern, um Überschneidungen mit anderen Elementen zu vermeiden.

Beachten Sie auch, dass .sticky-topverwendet position: stickywird, was nicht von jedem Browser vollständig unterstützt wird .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Scrollen

.navbar-nav-scrollZu einer .navbar-collapse(oder einer anderen Navigationsleisten-Unterkomponente) hinzufügen, um vertikales Scrollen innerhalb des umschaltbaren Inhalts einer reduzierten Navigationsleiste zu ermöglichen . Standardmäßig setzt das Scrollen bei 75vh(oder 75 % der Höhe des Ansichtsfensters) ein, aber Sie können dies mit Inline- oder benutzerdefinierten Stilen überschreiben. Bei größeren Ansichtsfenstern wird der Inhalt bei erweiterter Navigationsleiste wie in einer Standard-Navigationsleiste angezeigt.

Bitte beachten Sie, dass dieses Verhalten mit einem potenziellen Nachteil overfloweinhergeht, dass die Einstellung —when overflow-y: auto(erforderlich, um den Inhalt hier zu scrollen) overflow-xdas Äquivalent von autoist, wodurch einige horizontale Inhalte abgeschnitten werden.

Hier ist eine Beispiel-Navigationsleiste mit .navbar-nav-scrollwith style="max-height: 100px;", mit einigen zusätzlichen Randdienstprogrammen für optimale Abstände.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Ansprechende Verhaltensweisen

Navigationsleisten können .navbar-toggler, .navbar-collapseund .navbar-expand{-sm|-md|-lg|-xl}Klassen verwenden, um zu bestimmen, wann ihr Inhalt hinter einer Schaltfläche ausgeblendet wird. In Kombination mit anderen Dienstprogrammen können Sie ganz einfach auswählen, wann bestimmte Elemente angezeigt oder ausgeblendet werden sollen.

Fügen Sie für Navigationsleisten, die niemals einklappen, die .navbar-expandKlasse zur Navigationsleiste hinzu. Fügen Sie für Navigationsleisten, die immer einklappen, keine .navbar-expandKlasse hinzu.

Umschalter

Navbar Toggler sind standardmäßig linksbündig, aber wenn sie einem gleichgeordneten Element wie einem folgen .navbar-brand, werden sie automatisch ganz rechts ausgerichtet. Wenn Sie Ihr Markup umkehren, wird die Platzierung des Umschalters umgekehrt. Nachfolgend finden Sie Beispiele für verschiedene Umschaltstile.

Mit nein .navbar-brandam kleinsten Haltepunkt:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Mit einem Markennamen auf der linken Seite und einem Umschalter auf der rechten Seite:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Mit Umschalter links und Markenname rechts:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Externe Inhalte

Manchmal möchten Sie das Minimierungs-Plugin verwenden, um ein Containerelement für Inhalte auszulösen, die sich strukturell außerhalb der .navbar. Da unser Plugin auf dem idund dem data-targetMatching funktioniert, ist das ganz einfach!

Eingeblendeter Inhalt

Umschaltbar über die Navbar-Marke.

<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Wenn Sie dies tun, empfehlen wir, zusätzliches JavaScript einzuschließen, um den Fokus programmgesteuert auf den Container zu verschieben, wenn er geöffnet wird. Andernfalls wird es für Tastaturbenutzer und Benutzer von Hilfstechnologien wahrscheinlich schwierig sein, die neu aufgedeckten Inhalte zu finden – insbesondere, wenn der geöffnete Container in der Struktur des Dokuments vor dem Umschalter steht. Wir empfehlen außerdem sicherzustellen, dass der Toggler das aria-controlsAttribut hat, das auf den Inhaltscontainer zeigt id. Theoretisch ermöglicht dies Benutzern von Hilfstechnologien, direkt vom Umschalter zu dem Container zu springen, den er steuert – aber die Unterstützung dafür ist derzeit ziemlich lückenhaft.