Bootstrap 3 navbar culpe width

Normalerweise, wenn eine Bootstrap-Navigationsleiste kollabiert, ist das resultierende Menü die gesamte Breite des Bildschirms. Gibt es eine Möglichkeit, es nur so breit wie den Inhalt und auf der rechten Seite des Bildschirms zu machen?Bootstrap 3 navbar culpe width

Quelle

2017-02-22 James R. Skinner

Es kann in der folgenden way--

Arbeitsbeispiel

@media(max-width:767px){ 
 
       .navbar-inverse { 
 
       width:50%; 
 
       margin-left: 50%; 
 
       } 
 
      }

<html> 
 
<head> 
 
<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.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
      
 
      </style> 
 
      </head> 
 
      <body> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid" id="nav-container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">header</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
    
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <a href="" class="btn navbar-btn" id="signup">Sign Up</a> 
 
     <!--<a href="" ><button class="btn navbar-btn" id="stud">Studier demo</button></a>--> 
 
     <a href="" ><button class="btn navbar-btn" id="help">log-in</button></a> 
 
     <!--<li class="diff"><a class="nav_list" href="testlogin.php">--><!--<span class="glyphicon glyphicon-log-in"></span>--> <!--Sign Up</a></li>--> 
 
     <a href="" ><button class="btn navbar-btn" id="friend">another</button></a> 
 
    </ul> 
 
    
 
    </div> 
 
    </div> 
 
    </nav> 
 
    </body> 
 
    </html>

Quelle

2017-02-22 17:03:19 neophyte

Nun, das ist eine Verbesserung getan werden, aber ich hatte wirklich gehofft, um das Menü haben nur sein als Seite als Inhalt statt 50% des Bildschirms. Wie auch immer, das zu tun? –

Ich habe versucht, Grid-System, aber ohne Erfolg. also für mich müssen Sie nur Breite und Rand-links nach der Breite des Inhalts anpassen. – neophyte

Bootstrap 3 navbar culpe width

Antwort

Verwandte Themen