Ausrichtung des horizontalen Dropdown-Menüs mit Bootstrap

Question

Ich versuche, ein Dropdown-Menü, das horizontal ausgerichtet, um zu arbeiten und einige Probleme mit Ausrichtungen haben.

Hier ist meine Geige

https://jsfiddle.net/jqf66dbp/

Ich habe im Grunde die folgenden Änderungen an der CSS für das Drop-Down-

.dropdown-menu { 
    padding: 15px; 
    min-width: 500px; 
    } 

    .navbar-right .dropdown-menu { 
    right: inherit; 
    } 

Grundsätzlich hinzugefügt, wenn Sie durch die einzelnen Menüpunkte klicken, wird die Dropdown-Box Verschiebt nach rechts. Gibt es eine Möglichkeit, es so zu machen, dass es an der gleichen Position wie der erste Menüpunkt bleibt?

Mein zweites Problem, das ich zu lösen versuche, sind die Elemente im Dropdown-Menü. Für mein Geigenbeispiel habe ich einen Gegenstand länger gemacht als den Rest "Update Collaborate". Sie werden feststellen, dass dieser Gegenstand alle anderen Gegenstände verschiebt und die Ausrichtung durcheinander bringt. Wie kann ich alle Elemente besser ausrichten und "Update Collaborate" in einer Zeile haben?

Vielen Dank für Ihre Hilfe!

Answer 1

Hier ist die aktualisierte Geige für Ihr erstes Problem. Sie können die Größe der Dropbox in der folgenden CSS-Klasse anpassen, die ich zu 100% gemacht habe.

Fiddle Aktualisiert: - https://jsfiddle.net/jqf66dbp/3/

.dropdown-menu { 
    padding: 15px; 
    /* min-width: 500px; */ 
    width: 100%; 
    position: fixed; 
    top: 48px; 
    z-index: 1000; 
    text-align: left; 
    padding: 15px; 
    margin: 0 auto; 
    left:0px; 
} 

Könnten Sie bitte weitere Details über das zweite Problem geben? Weil ich kein Problem sehe, nachdem der oben genannte CSS-Wechsel