it-swarm.com.de

Erhöhen Sie die Breite des Bootstrap-Dropdown-Menüs

fragen Sie sich, ob jemand Tipps zur Erhöhung der Dropdown-Breite hat?

Ich habe eine Zeile, die zwei Spalten enthält, mit einem bisschen Javascript, das das Dropdown nach oben und unten schiebt, wenn ausgewählt wird. Das Problem, das ich habe, ist, dass ich scheinbar nicht herausfinden kann, wie die Dropdown-Breite vergrößert werden kann, wenn sie ausgewählt wird. Idealerweise würde die Dropdown-Liste der Spaltengröße entsprechen. Was aber passiert ist, dass die Dropdown-Breite nur die gleiche Größe hat wie der Text in der Dropdown-Liste. Hat jemand einen Vorschlag, wie Sie die Dropdown-Breite entsprechend der Spaltengröße vergrößern können?

<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>
22
ChoclateLove

Fügen Sie die folgende CSS-Klasse hinzu

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

Natürlich können Sie verwenden, was Ihren Bedürfnissen entspricht.

23
Chuks

Sie können zum Beispiel einfach eine Klasse "col-xs-12" zum <ul> hinzufügen, der die Listenelemente enthält:

<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>

Dies funktionierte bei jeder Bildschirmauflösung auf meiner Website. Die Klasse passt die Listenbreite an die darin enthaltene div an. Ich glaube:

 enter image description here

24
Rich

Update 2018

Sie sollten es einfach mit CSS wie folgt einstellen können.

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

Dies funktioniert sowohl in Bootstrap 3 als auch in Bootstrap 4.0.0 (Demo) .


Eine keine zusätzliche CSS - Option in Bootstrap 4 verwendet die size utils , um die Breite zu ändern. Beispielsweise wird hier die Klasse w-100 (width: 100%) für das Dropdown-Menü verwendet, um die Breite des übergeordneten Elements zu füllen.

 <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

18
Zim

Normalerweise müssen wir die Breite des Dropdown-Menüs steuern. Dies ist besonders wichtig, wenn das Dropdown-Menü ein Formular enthält, z. Anmeldeformular --- dann sollten das Dropdown-Menü und seine Elemente groß genug sein, um Benutzername/E-Mail und Passwort eingeben zu können.

Wenn der Bildschirm kleiner als 768px ist oder wenn das Fenster (mit dem Dropdown-Menü) auf weniger als 768px verkleinert wird, skaliert Bootstrap 3 das Dropdown-Menü ansprechend auf die gesamte Breite des Bildschirms/Fensters. Wir müssen diese Reaktion beibehalten.

Daher könnte die folgende css-Klasse dies tun:

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

(Ich hatte es in meiner Web-App verwendet.)

5
Binh Nguyen

Normalerweise besteht der Wunsch nach einer Anpassung der Menübreite an die Breite des übergeordneten Dropdown-Menüs. Dies kann leicht so erreicht werden:

.dropdown-menu {
  width:100%;
}
3
dpwrussell

Text wird niemals in die nächste Zeile umgebrochen. Der Text wird in derselben Zeile fortgesetzt, bis a 
Tag ist angetroffen.

.dropdown-menu {
    white-space: nowrap;
}
0
Norman Huth