Nav bar is vertical and i need it horizontal - html

Question

I am using bootstraps 3 to create a nav bar and for the life of me I cannot get it to layout the way I would like. I am having a hard time learning all these bootstrap classes. Anyways I would like all 5 of my elements here to be layed out horizontally in a single row but as you will see in the fiddle all 5 components are on a different row. Any suggestions?
Fiddle : http://jsfiddle.net/cdewey/7M7sj/1/
Code:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<form class="form form-horizontal" role="form">
<ul class="nav navbar-nav">
<li>
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker1' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<div class="col-md-2">
<div class='input-group date row' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</li>
<li>
<div class="form-group">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</div>
</li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
pickDate: false
});
$('#datetimepicker3').datetimepicker({
pickDate: false
});
$('#datetimepicker1').datetimepicker({
pickTime: false
});
});
</script>
</nav>

Answer 1

Use this tag to open the menu div:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
Look this really clear example to understand how it works: http://getbootstrap.com/examples/navbar-fixed-top/

Answer 2

JSFiddle Demo
You must remove the <div class="form-group"> after the li and put it just after the ul.
The <div class="form-group"> just creates separate entities for every li. Look at the demo I provided. You will understand.