Bootstrap navbar Inhalt auf der linken Seite verschwindet beim Reduzieren der Fenstergröße

Das Problem ist, dass der linke Inhalt in der Navigationsleiste verschwindet, wenn die Fenstergröße reduziert wird. Ich versuchte mit der row und column (column-sm and column-xs-) Klasse das Problem zu beheben, aber es ist immer noch da.Bootstrap navbar Inhalt auf der linken Seite verschwindet beim Reduzieren der Fenstergröße

Ich befestige auch die Bilder der Bar.

im ersten Bild der Bildschirmgröße

im zweiten Bild maximiert wird die Bildschirmgröße So

reduziert Ich mag, dass der Inhalt XYZ sollte immer gesehen werden unabhängig von der Bildschirmgröße.

Ich gebe auch die Navigationsleiste HTML-Code:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <div class="row row-content"> 
       <div class="col-xs-11 col-sm-4"> 
        <ul class="nav navbar-nav navbar"> 
         <li> <a href="#"><b> XYZ </b></a></li> 
        </ul> 
       </div> 
       <div class="col-xs-1 col-sm-8"> 
        <ul class="nav navbar-nav navbar-right"> 

         <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
          aria-hidden="true"></span> Home</a></li> 
         <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
          aria-hidden="true"></span>About</a></li> 
         <li><a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav>

Jede Hilfe wird sehr geschätzt. Danke.

Quelle

2016-05-30 Snake Eyes

Nun, Sie haben einfach Ihre Marke Anker Registerkarte "XYZ" verlegt. Und verwenden Sie navbar-brand zu Ihrer Marke.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <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="#"><b> XYZ </b></a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <div class="row row-content"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
 
          aria-hidden="true"></span> Home</a> 
 
      </li> 
 
      <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
 
          aria-hidden="true"></span>About</a> 
 
      </li> 
 
      <li> 
 
      <a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</nav>

Quelle

2016-05-30 19:00:50

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <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="#"><b> XYZ </b></a></li> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 

         <li class="active"><a href="#"><span class="glyphicon glyphicon-home" 
          aria-hidden="true"></span> Home</a></li> 
         <li><a href="aboutus.html"><span class="glyphicon glyphicon-info-sign" 
          aria-hidden="true"></span>About</a></li> 
         <li><a href="contactus.html"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav> 
</body> 
</html>

Versuchen Sie es.

Die Sache ist, dass Sie die Verbindung mit Klasse verwenden navbar-brand im navbar-collapse
ist also, warum es auch kollabiert.

Ich hoffe, dass das Problem gelöst ist.

Quelle

2016-05-30 18:56:22 bhansa

besser den Jquery Link geben, bevor der Bootstrap-js Toggle zum Laufen zu bringen. – bhansa

Bootstrap navbar Inhalt auf der linken Seite verschwindet beim Reduzieren der Fenstergröße

Antwort

Verwandte Themen