html - Nav bar is vertical and i need it horizontal -

html - Nav bar is vertical and i need it horizontal -

i using bootstraps 3 create nav bar , life of me cannot layout way like. having hard time learning these bootstrap classes. anyways 5 of elements here layed out horizontally in single row see in fiddle 5 components on different row. 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>

use tag open menu div:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">

look clear illustration understand how works: http://getbootstrap.com/examples/navbar-fixed-top/

html css twitter-bootstrap twitter-bootstrap-3