Sizing elements inside boostrap navbar for phone - html

Question

I need to expand my searchbar 'navbarSearchQuery' so that it's bigger (~280px) when the page is larger then a phone size.
And when it's a phone I want it to span across the whole top of the page when the page gets shrunk down.
Here is what I've tried and a fiddle example.
I'm having a problem with too much space in between the search bar and the 'browse' dropdown in a size greater then a phone. And I can't seem to get the width set right on the searchbar when it's in a phone size.
#navbarSearchQuery {
float: left;
margin-top: 8px;
margin-left: 15px;
width: 280px;
}
.navbar-inline {
display: inline-flex;
width: 80%
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inline">
<a class="navbar-brand hidden-xs" href="/Home">Yoga</a>
<input type="text" class="form-control" placeholder="Search" id="navbarSearchQuery" name="location">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Browse <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Popular
</li>
<li>Friends
</li>
<li>Groups
</li>
<li>Neighborhoods
</li>
<li>About <span class="sr-only">(current)</span>
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Answer 1

Use media queries to adjust for it.
.navbar-default #navbarSearchQuery {
float: left;
margin: 8px 15px 0 15px;
width: 280px;
}
.navbar-default .navbar-inline {
display: inline;
}
#media (max-width: 360px) {
.navbar-default #navbarSearchQuery {
width: 180px;
}
.navbar-default .navbar-inline {
display: inline-flex;
width: 60%
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inline"> <a class="navbar-brand hidden-xs" href="/Home">Yoga</a>
<input type="text" class="form-control" placeholder="Search" id="navbarSearchQuery" name="location">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"> Browse <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Popular
</li>
<li>Friends
</li>
<li>Groups
</li>
<li>Neighborhoods
</li>
<li>About <span class="sr-only">(current)</span>
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Answer 2

On the same basis as the other answer of using media queries. The difference is mine has a different response on a mobile device.
http://jsfiddle.net/nefvrf6j/5/
#navbarSearchQuery {
margin:8px 15px;
}
.navbar-inline {
display: inline-flex;
/* This makes the search bar stretch across the whole screen except
for the drop down menu area */
width:calc(100% - 59px);
}
#media screen and (min-width: 360px) {
#navbarSearchQuery {
width:280px;
}
}