Wie kann ich eine dropdown-Liste im header eines eingestürzten bootstrap navbar Menü

tl;dr

Wie bekomme ich eine richtige dropdown-Liste erscheint neben der standard-Schaltfläche Liste in einem eingestürzten bootstrap navbar Menü?

Details

Mit MVC 5 und Bootstrap 3 (3.3.2), Frage ich mich, wie ich eine drop-down-Menü in der minimierten version der navbar. Die Vorgabe ist etwas problematisch.

Ich versuche zu Ort-eine Sprache-Selektor in der oberen rechten Ecke der Seite, unabhängig davon, ob das Menü ausgeblendet ist für den mobilen oder nicht.

Dies ist, wie es aussieht (und soll weiterhin) in the non-collapsed navbar:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            @Html.ActionLink("Application name", "Index", "Home", New With {.area = ""}, New With {.class = "navbar-brand"})
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainMenu">
                <span class="glyphicon glyphicon-th-list"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="MainMenu">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Survey", "Instructions", "Survey")</li>
                <li><a href="/LT/LocalizationAdmin/LocalizationAdmin.aspx">Localization</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Register", "Register", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "registerLink"})</li>
                <li>@Html.ActionLink("Log in", "Login", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "loginLink"})</li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">EN<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="/LT/DE">DE</a></li>
                        <li><a href="/LT/EN">EN</a></li>
                        <li><a href="/LT/ES">ES</a></li>
                        <li><a href="/LT/FR">FR</a></li>
                        <li><a href="/LT/RO">RO</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Ich Probleme auf mobilen Geräten mit diesem Muster. Unten ist das, was ein Benutzer NACH dem klicken auf die Sprache, die drop-down - (nach dem drücken der list-Taste). Beachten Sie die nav-Leiste auf der rechten Seite? Gut, dass die bar nicht zeigen, auf mobilen Geräten und so den Benutzer zu denken, dass die drop-down-macht nichts, nicht ahnend, dass Sie haben, um durch die Liste scrollen, um auf die Sprachoptionen.

Was ich Suche zu tun haben, ist eine drop-down (wie im ersten Bild) neben der Liste die Schaltfläche, wie im Bild unten, aber für das Leben von mir ich kann nicht herausfinden, wie es zu tun.

Dies ist eine enge, als ich in der Lage gewesen, zu erhalten, aber eine Nebenwirkung davon ist, dass die Sprachauswahl richtet auf der linken Seite, wenn das Menü nicht zusammengebrochen. Ich nicht wirklich wollen, das Akkordeon, ich würde viel lieber die drop-down-Menü. Gelingt das nicht, wäre es schön, wenn die Sprachwahl geöffnet, eine Liste der gleichen Weise wie die Schaltfläche Liste wird mit (ie.volle Breite), anstatt es verklemmt sich gegen die Seite.

Den code für das Letzte Bild, ist wie folgt:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            @Html.ActionLink("Application name", "Index", "Home", New With {.area = ""}, New With {.class = "navbar-brand"})
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainMenu">
                <span class="glyphicon glyphicon-th-list"></span>
            </button>
            <ul class="nav navbar-nav pull-right" style="width: 65px;">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 5px;">EN<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="/LT/DE">DE</a></li>
                        <li><a href="/LT/EN">EN</a></li>
                        <li><a href="/LT/ES">ES</a></li>
                        <li><a href="/LT/FR">FR</a></li>
                        <li><a href="/LT/RO">RO</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="navbar-collapse collapse" id="MainMenu">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li>@Html.ActionLink("Survey", "Instructions", "Survey")</li>
                <li><a href="/LT/LocalizationAdmin/LocalizationAdmin.aspx">Localization</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Register", "Register", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "registerLink"})</li>
                <li>@Html.ActionLink("Log in", "Login", "Account", routeValues:=Nothing, htmlAttributes:=New With {.id = "loginLink"})</li>
            </ul>
        </div>
    </div>
</div>

Hat jemand eine Idee, wie dies zu erreichen? Entschuldigung für die Länge, aber ich wollte klar sein.