Non-effondrement de bootstrap 3 menu déroulant sur mobile

Je vais essayer d'obtenir un twitter bootstrap menu déroulant pour ne pas s'effondrer et de rester sur la même ligne lors de l'utilisation d'appareils plus petits. Voici à quoi il ressemble actuellement:

Non-effondrement de bootstrap 3 menu déroulant sur mobile

J'aimerais que le nom (dans cet exemple, John Smith) pour être en ligne avec Ma Demande de texte et le bouton à bascule. Comment pourrais-je aller sur la réalisation de qui?

Exemple: http://bootply.com/99326

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">My Application</a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right navbar-user">
                <li class="dropdown user-dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
                        <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
Double question. Voir cette question
Semble le faire, bien que la plupart des réponses sont datés ou se référant à twbs 2. Je suis en train de penser, il y a un moyen facile de le faire dans les dernières versions.
Il n'a pas l'air comme il est facile de "out of the box" façon de le faire, mais je n'ai trouver cette question qui semble avoir deux réponses valides (avec bootstrap 3).
Bootstrap 3 est significativement différente de 2. J'ai posté une réponse ci-dessous.

OriginalL'auteur Josh | 2013-12-09