Bootstrap Navbar Korrekturen

Question

Ich habe ein Problem mit meiner Navbar, die ich mit Bootstrap mache.

1. Suchformular hat viel ungenutzten Platz dahinter, wie könnte ich es loswerden?
2. Kann ich die navbar kollabieren lassen, sobald sie eine 2-zeilige Navigationsleiste erstellt?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <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="index.php">&nbsp;Name&nbsp;</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open" style="color: white"></span> <img src="img/flags/country.png"> <b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">something 
 
      <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">something 
 
      <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">something 
 
      <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user" style="color: white"></span>admin 
 
      <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <form class="navbar-form navbar-right form-inline"> 
 
     <span class="label label-default">label 1</span> 
 
     <div class="input-group col-sm-2"> 
 
     <input type="text" class="form-control input-sm" style="border-radius: 10px 0 0 10px;"> 
 
     <div class="input-group-btn"> 
 
      <button class="btn btn-default btn-sm" type="submit" style="border-radius: 0 10px 10px 0;"> 
 
         <i class="glyphicon glyphicon-search"></i> 
 
        </button> 
 
     </div> 
 
     </div> 
 
     <span class="label label-default">label 2</span> 
 
     <div class="input-group col-sm-2"> 
 
     <input type="text" class="form-control input-sm" style="border-radius: 10px 0 0 10px;"> 
 
     <div class="input-group-btn"> 
 
      <button class="btn btn-default btn-sm" type="submit" style="border-radius: 0 10px 10px 0;"> 
 
         <i class="glyphicon glyphicon-search"></i> 
 
        </button> 
 
     </div> 
 
     </div> 
 
     <span class="label label-default">label 3</span> 
 
     <div class="input-group col-sm-2"> 
 
     <input type="text" class="form-control input-sm" style="border-radius: 10px 0 0 10px;"> 
 
     <div class="input-group-btn"> 
 
      <button class="btn btn-default btn-sm" type="submit" style="border-radius: 0 10px 10px 0;"> 
 
         <i class="glyphicon glyphicon-search"></i> 
 
        </button> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</nav>

https://jsfiddle.net/nooorz24/ove78e91/1/

Answer 1

Die Navigationsleiste wird in Abhängigkeit von der Bildschirmgröße verkleinern Sie festlegen. Im Moment verlinken Sie mit dem CDN, Sie müssten also die @media-Abschnitte des CSS überschreiben.

Der zusätzliche Speicherplatz muss ebenfalls außer Kraft gesetzt werden. Es sieht so aus, als ob es in dem Stylesheet hier ist:

@media (min-width: 768px) 
navbar.less:385 
.navbar-right { 
    float: right!important; 
    margin-right: -15px; 
}