I'm new to bootstrap and have been trying to put together a basic navigation bar. The issue I have is how to keep elements together without making use of a form element.

The search button is floating under the Search input element as shown jsfiddle [here](https://jsfiddle.net/pehjae0c/)

My intended result is to have both input and button juxtaposed as shown below but at the same time keep distance from other menu items:
[![enter image description here](https://i.stack.imgur.com/eSQlw.png)](https://i.stack.imgur.com/eSQlw.png)

What is the bootstrap configuration (or classes) to achieve this effect?

My HTML is:

```
<nav class="navbar navbar-default" style="margin-top:3px">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div style="width:50px; padding-top:4px; padding-bottom:4px">
                <span>Brand</span>
                <!--<img src="content/images/MaxForms_2.png" />-->
            </div>
        </div>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Action <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>

            <li>
                <ul class="">
                    <li>
                        <input type="text" class="form-control" placeholder="Search item">
                        <button type="submit" class="btn btn-default">Search</button>
                    </li>
                </ul>
            </li>

            <li class="input-lg">
                <button type="button" class="btn btn-default" data-bind="click: $root.saveForm, event:{blur: $root.removeStatus}">
                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>  Submit Form
                </button>
            </li>
        </ul>

    </div><!-- /.navbar-collapse -->
</nav>

```