wie auf der Bildschirmgröße

Question

verschiedene Footer navbar Inhalt angezeigt wird basierend auf Bildschirmgröße Ich möchte verschiedene Footer Inhalt anzeigen.

für große Bildschirme für I:

<nav class="navbar p-0"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item">left content</li> 
    </ul> 
    <ul class="navbar-nav m-auto"> 
     <li class="nav-item">center content</li> 
    </ul> 
    <ul class="navbar-nav ml-auto"> 
     <li class="nav-item">right content</li> 
    </ul> 
</nav> 

für kleine Bildschirme würde ich angezeigt werden mag:

<nav class="navbar p-0"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item">left content</li> 
    </ul> 
</nav> 

wahrscheinlich habe ich etwas verpasst in der Dokumentation zu

• https://getbootstrap.com/docs/4.0/components/navbar/

aber es muss eine Möglichkeit geben, dies zu tun ...

Answer 1

dank @NishiJain, der mich in die richtige Richtung konnte ich finde eine ziemlich einfache (und trockene) Lösung:

<nav class="navbar p-0"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item">left content</li> 
    </ul> 
    <ul class="navbar-nav m-auto d-none d-lg-flex"> 
     <li class="nav-item">center content</li> 
    </ul> 
    <ul class="navbar-nav ml-auto d-none d-lg-flex"> 
     <li class="nav-item">right content</li> 
    </ul> 
</nav> 

voll docs in Bezug auf Anzeigefunktionen: https://getbootstrap.com/docs/4.0/utilities/display/

Answer 2

Sie können bootstrap responsive Dienstprogramme Klassen verwenden.

Für große Bildschirmanzeige

<nav class="navbar p-0 hidden-xs-down"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item">left content</li> 
    </ul> 
    <ul class="navbar-nav m-auto"> 
     <li class="nav-item">center content</li> 
    </ul> 
    <ul class="navbar-nav ml-auto"> 
     <li class="nav-item">right content</li> 
    </ul> 
</nav> 

für kleine Bildschirme

<nav class="navbar p-0 hidden-md-up"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item">left content</li> 
    </ul> 
</nav> 

Weitere Informationen finden: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Answer 3

<nav class="navbar p-0 d-none d-md-block"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item">left content</li> 
    </ul> 
    <ul class="navbar-nav m-auto"> 
     <li class="nav-item">center content</li> 
    </ul> 
    <ul class="navbar-nav ml-auto"> 
     <li class="nav-item">right content</li> 
    </ul> 
</nav> 

<nav class="navbar p-0 d-block d-md-none"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item">left content</li> 
    </ul> 
</nav> 

Die Klasse d-none/block sollte für diesen Fall gut funktionieren.

Werfen Sie einen Blick auf sein eigenes Dokument here.