Wie wird das Dropdown-Menü rechtsbündig in der Bootstrap-Navigationsleiste bei 320 x 480 angezeigt?

Was muss ich auf meine Bootstrap navbar ändern, so dass die Drop-Down auf der rechten Seite auf dem kleineren Bildschirm wie auf den größeren Bildschirmen funktioniert:Wie wird das Dropdown-Menü rechtsbündig in der Bootstrap-Navigationsleiste bei 320 x 480 angezeigt?

FULL CODE:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>SHOWCASE: Bootstrap Navbar</title>    
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>  
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <style type="text/css"> 
      .pagecontent { 
       margin: 0 18px; 
      } 
      /* bootstrap override */ 
      .container { 
       width: 100%; 
       padding: 0; 
      } 
      .navbar { 
       border-radius: 0px; 
      } 
      .container a { 
       color: yellow; 
      } 
      .navbar-text { 
       float: left !important; 
       margin-right: 10px; 
      } 
      .navbar-right { 
       float: right!important; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <nav class="navbar navbar-inverse"> 
       <div class="container-fluid"> 
        <div class="navbar-header pull-left"> 
         <a class="navbar-brand" href="#">Company Name</a> 
        </div>     
        <ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block"> 
         <li class="active"><a href="#">Page 1</a></li> 
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
        </ul>      
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown pull-right"> 
          <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Menu 1</a></li> 
           <li><a href="#">Menu 2</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Menu A</a></li> 
           <li><a href="#">Menu B</a></li> 
           <li><a href="#">Menu C</a></li> 
          </ul>       
         </li> 
         <li class="dropdown pull-right"> 
          <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-cog"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Settings 1</a></li> 
           <li><a href="#">Settings 2</a></li> 
           <li><a href="#">Settings 3</a></li> 
           <li class="divider"></li> 
           <li><a href="#">Settings A</a></li> 
           <li><a href="#">Settings B</a></li> 
          </ul> 
         </li> 
        </ul>      
       </div> 
      </nav> 
      <div class="pagecontent"> 
       <p class="visible-xs-block">seen on xs screens.</p> 
       <p class="visible-sm-block">seen on sm screens.</p> 
       <p class="visible-md-block">seen on md screens.</p> 
       <p class="visible-lg-block">seen on lg screens.</p> 
      </div> 
     </div> 
    </body> 
</html>

Ausgabe mit Dasith Lösung:

Die Lösung für dieses ist einfach eine Hintergrundfarbe hinzufügen:

.navbar-nav .open .dropdown-menu { 
     background-color: #fff;

Issue # 2 mit Dasith Lösung:

Quelle

2016-04-21 Edward Tanguay

Schnell Inspektion durch Chrom Dev-Tools haben mich dazu gebracht, dieses Update zu machen:

@media (max-width: 767px){ 
    .navbar-nav .open .dropdown-menu { 
      border: 1px solid rgba(0,0,0,.15); 
      position:absolute; 
      box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    } 
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover { 
     color: #000; 

    } 
    }

Hier ist eine angepasste Version mit den obigen Änderungen für ein besseres Verständnis, wie es here..

Quelle

2016-04-21 15:49:53

Dank Dasith ausspielt, das ist genau das, was ich suchte, aber ich versuche, einen wenig Fehler zu beheben mit Ihrem Lösung, die das Menü unter dem Text auf der Seite angezeigt wird, sicherlich ein Z-Index oder Hintergrundproblem, aber ich kann nicht scheinen, es zu bekommen. Ich habe oben in meiner Frage einen Screenshot hochgeladen. –

Ahh ist nicht wirklich ein Z-Index-Problem seine Hintergrundfarbe innen. Navbar-nav .open .dropdown-Menü Hintergrund auf weiß Ich habe meinen Code Stift Beispiel hier aktualisiert http://codepen.io/DasithKuruppu/pen/MyBwpR ? Editoren = 1100 –

Ok, ich habe es. Ich musste dem '.navbar-nav .open .dropdown-Menü nur eine weiße Hintergrundfarbe hinzufügen und es funktioniert gut, danke. –

Wie wird das Dropdown-Menü rechtsbündig in der Bootstrap-Navigationsleiste bei 320 x 480 angezeigt?

Antwort

Verwandte Themen