So schließen Sie das Element in der Bootstrap-Navigationsleiste aus

Question

Ich wollte ein bestimmtes Element in der Navigationsleiste aus dem Reduzierungsfeld ausschließen, wenn der Bildschirm klein wird.

Dies ist der HTML-Code, den ich bisher habe:

<div class="container"> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="."><img class="ico_img" src="assets/ico_img.png" /></a> 
     </div> 
     <div class="collapse navbar-collapse" id="navBar"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a>Home</a></li> 
      <li><a href="page1.php">Page 1</a></li> 
      <li><a href="page2.php">Page 2</a></li> 
      <li><a href="page3.php">Page 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right hidden-xs"> 
      <li><a class="welcome"></a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</div> 

ich den Begrüßungs Teil ausschließen möchte. Eine Lösung, die ich bisher gefunden habe, besteht darin, das Klassenattribut "hidden-xs" hinzuzufügen, um die Willkommensnachricht auszublenden, wenn die Umschaltfunktion aktiviert wird, aber gibt es dafür einen saubereren Weg?

Answer 1

Sie können es mit einem Bündel von .visibble - * - * tun. Es ist sauberer mit .hidden-xs.