Zwiększ szerokość menu rozwijanego bootstrap

Question

zastanawiasz się, czy ktoś ma jakieś wskazówki, jak zwiększyć szerokość rozwijania?

Mam wiersz zawierający dwie kolumny z odrobiną javascript, które przesuwa menu w górę iw dół, gdy wybrane. Problem, który mam, polega na tym, że nie mogę sobie wyobrazić, jak zwiększyć szerokość rozwijania po wybraniu, najlepiej, aby lista rozwijana była zgodna z rozmiarem kolumny. Ale co się dzieje, to że szerokość rozwijania ma tylko ten sam rozmiar, co tekst w menu rozwijanym, czy ktoś ma sugestię, jak zwiększyć szerokość rozwijania, aby dopasować rozmiar kolumny?

<div class="row question"> 
     <div class="dropdown"> 
      <div class="col-md-6" data-toggle="dropdown"> 
       First column 
       <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
       </ul> 
      </div> 
     </div><!-- end of the dropdown --> 
     <div class="dropdown"> 
      <div class="col-md-6" data-toggle="dropdown"> 
       second column 
       <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
        <li>Insert your menus here</li> 
       </ul> 
      </div> 
     </div> 
    </div><!--end of the row question --> 

<script> 
    // ADD SLIDEDOWN ANIMATION TO DROPDOWN // 
    $('.dropdown').on('show.bs.dropdown', function(e){ 
     $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
    }); 

    // ADD SLIDEUP ANIMATION TO DROPDOWN // 
    $('.dropdown').on('hide.bs.dropdown', function(e){ 
     $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
    }); 
</script> 

Answer 1

Dodaj następujący css klasa

.dropdown-menu { 
    width: 300px !important; 
    height: 400px !important; 
} 

Oczywiście możesz użyć tego, co odpowiada Twoim potrzebom.

Answer 2

Aktualizacja 2018

Powinieneś być w stanie po prostu ustawić go za pomocą CSS tak ..

.dropdown-menu { 
    min-width:???px; 
} 

Działa to zarówno Bootstrap 3 i Bootstrap 4.0.0 (demo).

---

bez dodatkowych CSS opcja w Bootstrap 4 używa sizing utils zmienić szerokość. Na przykład, tutaj W-100 (szerokość: 100%) klasa służy do rozwijanego menu, aby wypełnić szerokość od jego rodzic ....

<ul class="dropdown-menu w-100"> 
     <li><a class="nav-link" href="#">Choice1</a></li> 
     <li><a class="nav-link" href="#">Choice2</a></li> 
     <li><a class="nav-link" href="#">Choice3</a></li> 
</ul> 

https://www.codeply.com/go/pAqaPj59N0

Answer 3

Można na przykład po prostu dodać klasę „Col-XS-12” do <ul> która posiada elementy listy:

<div class="col-md-6" data-toggle="dropdown"> 
      First column 
      <ul class="dropdown-menu col-xs-12" role="menu" aria-labelledby="dLabel"> 
       <li>Insert your menus here</li> 
       <li>Insert your menus here</li> 
       <li>Insert your menus here</li> 
       <li>Insert your menus here</li> 
       <li>Insert your menus here</li> 
       <li>Insert your menus here</li> 
      </ul> 
     </div> 

To działało OK w dowolnej rozdzielczości ekranu w moim miejscu. Klasa będzie dopasować szerokość do listy zawierające div to wierzę:

Answer 4

Zwykle pragnieniem jest, aby dopasować szerokość menu do szerokości rozwijanej rodzica. Można to łatwo osiągnąć w następujący sposób:

.dropdown-menu { 
    width:100%; 
} 

Answer 5

Zazwyczaj potrzebujemy kontrolować szerokość rozwijanego menu; specjalnie to jest niezbędne, gdy menu zawiera formularz, np. Formularz logowania --- wówczas menu rozwijane i jego elementy powinny być wystarczająco szerokie, aby ułatwić wprowadzanie nazwy użytkownika/adresu e-mail i hasła.

Poza tym, gdy ekran jest mniejszy niż 768px lub gdy okno (zawierające menu rozwijane) jest zmniejszone do mniejszego niż 768px, Bootstrap 3 reaguje w sposób responsywny na rozwijane menu na całą szerokość ekranu/okna. Musimy zachować tę reponsywną akcję.

Stąd następujące klasy css mógłby zrobić:

@media (min-width: 768px) { 
    .dropdown-menu { 
     width: 300px !important; /* change the number to whatever that you need */ 
    } 
} 

(używałem go w mojej aplikacji sieci web.)