Bootstrap 3: Two Row Nav

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
    <nav class="navbar navbar-inverse navbar-default">
        <div class="col-sm-3"> <a class="navbar-brand">Brand</a>

        </div>
        <div id="navigation" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">HOME<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">PRODOTTI</a></li>
                        <li><a href="./html/blog.html">BLOG</a></li>
                        <li><a href="#">MAPPA & CONTATTI</a></li>
                    </ul>
                </div>
        <form class="navbar-form">
            <div class="col-sm-3 col-sm-offset-2">
                <div class="input-group"> <span class="input-group-addon">@</span> 
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="col-sm-3">
                <div class="input-group"> <span class="input-group-addon">@</span> 
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="col-sm-1">
                <button class="btn btn-primary btn-block" type="button">Login</button>
            </div>
        </form>
    </nav>
</div>

CSS

.navbar-form {
  float: right;
}