Bootstrap 3: Input group in navbar form takes up entire width

Question

So this is what bootstrap\'s navbar form looks like.

The default HTML is:

Answer 1

I prefer to treat the form element as normal, and just fixed its apperance using this CSS rule:

.navbar-form .input-group {
    display: inline-block;
    width: auto;
    vertical-align: middle;

    .form-control,
    .input-group-btn {
        float: left;
    }
}