Bootstrap navbar corrections - css

Question

I'm having a problem with my navbar that I'm making with bootstrap.
search form has a lot of unused space behind it, how could I get rid of it?
Can I make navbar to collapse as soon at it would make 2 line navigation bar?
<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"> Name </a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<span class="glyphicon glyphicon-folder-open" style="color: white"></span> <img src="img/flags/country.png"> <b class="caret"></b>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</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>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</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>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</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>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</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>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</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

The nav bar will collapse depending on the screen size you set. Right now you are linking to the CDN, so you would have to override the #media sections of the CSS.
The extra space will need to be overridden too. It looks like it's in the stylesheet here:
#media (min-width: 768px)
navbar.less:385
.navbar-right {
float: right!important;
margin-right: -15px;
}