Bootstrap Full Responsive Navbar mit Mini-Logos für jeden Menüpunkt

Question

Ich hoffe euch allen geht es gut. Ich bin neu hier und ich habe eine Frage. Ich arbeite mit mvc, mit C#, html, css und boostrap. Ich versuche eine responsive Navigationsleiste zu entwickeln. Es enthält Symbole für jeden Menüeintrag. Zum Beispiel, Zuhause (ein Haussymbol mit Worten darunter), Punkt 2, Punkt 3 und so weiter. Beim Anzeigen der Nav-Leiste in Movile-Geräten (kleine Bildschirme) werden die Icons im Hamburger-Menü weiterhin so groß dargestellt wie in der Computerversion. Ich möchte die icnons Größen (das Markenlogo und die Elemente) in der Navigationsleiste für jeden Bildschirm anzupassen size..here Sie den Code sind:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="brand"> 
       <img class="img-responsive" src="http://Brandlogo.com/brandlogo.png alt=""> 
      </a> 

     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 

       <li> 
        <a href="@Url.Action("action1", "item1")"> 
         <img class="img-responsive" src="/images/item1.png" alt="imagen"> item1 
        </a> 
       </li> 
       <li> 
        <a href="#cont-4"> 
         <img class="img-responsive " src="/images/item2.png " alt="imagen">item2 
        </a> 
       </li> 

      </ul> 

     </div><!-- /.navbar-collapse --> 

    </div><!-- /.container-fluid --> 

</nav> 

danken Ihnen für Ihre Hilfe

Answer 1

Sie sollte media queries

Es ermöglicht Ihnen, bestimmte CSS-Stile basierend auf der Bildschirmgröße zu ändern.