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

Question

Ich frage mich, ob jemand Tipps hat, wie man die Dropdown-Breite vergrößern kann?

Ich habe eine Zeile mit zwei Spalten mit etwas Javascript, das das Dropdown-Menü bei Auswahl nach oben und unten verschiebt.Das Problem, das ich habe, ist, dass ich anscheinend nicht herausfinden kann, wie ich die Breite des Dropdown-Menüs erhöhen kann, wenn es ausgewählt ist. Idealerweise würde das Dropdown-Menü der Spaltengröße entsprechen.Aber was passiert, ist, dass die Dropdown-Breite nur die gleiche Größe hat wie der Text innerhalb des Dropdowns. Hat jemand einen Vorschlag, wie man die Dropdown-Breite vergrößern kann, um sie an die Spaltengröße anzupassen?

<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

Fügen Sie die folgende CSS-Klasse hinzu

generasacodicetagpre.

Natürlich können Sie nutzen, was Ihren Bedarf übereinstimmt.

Answer 2

Sie können beispielsweise einfach die Klasse „col-xs-12“ hinzufügen <ul> welches 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 einwandfrei.Ich glaube, dass die Klasse die Listenbreite an das enthaltende div anpasst:

Answer 3

update 2018

Sie sollten es in der Lage sein, es einfach mit CSS wie diesem einzustellen.

generasacodicetagpre.

Dies funktioniert in beiden Bootstrap 3 und bootstrap 4.0.0 (Demo) .

.

---

a keine zusätzliche CSS Option in bootstrap 4 verwendet den MISSIZIERUNGEN Um die Breite zu ändern.Zum Beispiel wird hier die Klasse W-100 (Breite: 100%) für das Dropdown-Menü verwendet, um die Breite des Elternteils zu füllen ....

generasacodicetagpre.

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

Answer 4

Normalerweise müssen wir die Breite des Dropdown-Menüs steuern.Besonders ist das wichtig, wenn das Dropdown-Menü ein Formular enthält, z.Login-Formular --- Dann sollten das Dropdown-Menü und seine Elemente groß genug sein, um den Benutzernamen / E-Mail und das Kennwort zu erleichtern.

Außerdem, wenn der Bildschirm kleiner als 768 px ist oder wenn das Fenster (mit dem Dropdown-Menü enthält) auf kleiner als 768px gezoomt wird, skaliert der Bootstrap 3 das Dropdown-Menü an die gesamte Breite des Bildschirms / Fensters an.Wir müssen diese restöne Aktion halten.

Daher könnte die folgende CSS-Klasse das tun:

generasacodicetagpre.

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

Answer 5

In der Regel ist der Wunsch, mit der Speisebreite der Breite des Dropdown-Elternteils anzupassen.Dies kann leicht wie möglich erreicht werden:

generasacodicetagpre.

Answer 6

Text wird niemals in die nächste Zeile einwickeln.Der Text setzt sich auf derselben Zeile fort, bis ein Tag ein Tag auftritt.

generasacodicetagpre.

Answer 7

Wenn Sie BS4 haben, könnte eine andere Option sein:

generasacodicetagpre.