Bootstrap kullanarak yatay açılır menünün hizalanması

Question

Yatay olarak çalışmak ve hizalamalarla ilgili bazı sorunları çözmek için açılan bir açılır menüyü almaya çalışıyorum. İşte

benim keman

https://jsfiddle.net/jqf66dbp/

Ben temelde, her menü öğesi aracılığıyla açılan kutucuğu tıkladığınızda

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

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

Temelde açılan için css aşağıdaki değişiklikleri ekledik olduğunu sağa kaydırır. İlk menü öğesiyle aynı konuma sıkışması için bunu yapmanın bir yolu var mı?

Çözmeyi denediğim ikinci sorun, açılır menüdeki öğelerdir. Keman örneğim için geri kalanından bir öğe daha yaptım "Güncelleme İşbirliği" Bu öğenin tüm diğer öğeleri değiştirdiğini ve hizalamayı bozduğunu göreceksiniz. Tüm öğelerin daha iyi hizalanmasını nasıl sağlayabilirim ve bir satırda "Güncelleme İşbirliği" yap.

Yardımlarınız için teşekkür ederiz!

Answer 1

İşte ilk sorun için güncelleştirilmiş keman. Dropbox'ın boyutunu,% 100 yaptığım aşağıdaki CSS sınıfında ayarlayabilirsiniz. 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; 
} 

İkinci sorun üzerinde daha fazla ayrıntı verebilir misiniz: -

Fiddle Güncelleme? Yukarıdaki css değişiklikten sonra herhangi bir sorun görmediğim için