Die Breite der Bootstrap-Navigationsleiste wird unerwartet erweitert
Ich habe folgende Navigation:
Wenn ich auf einen Menüpunkt klicke, bekomme ich Folgendes:
Das Problem ist, dass wenn ich auf den Menülink klicke. Der Link-Container erbt die Breite des Dropdown-Menüs. Kann ich das sowieso mit einer reinen CSS-Lösung deaktivieren?
Ich benutze Bootstrap 3.4.
Die Idee meiner Navigation besteht darin, dass die Dropdown-Menüs die Höhe des Navigationsbereichs erhöhen. Indem Sie das Dropdown-Menü auf Position: Relativ setzen. Der übergeordnete Menüeintrag erbt seine Breite. Ich bin verwirrt, warum es das tun würde. Gibt es eine Möglichkeit, dies zu verhindern?
Vielen Dank im Voraus. Lassen Sie mich wissen, wenn Sie weitere Details benötigen.
Hier ist das aktuelle Markup:
%Vor%7 Antworten
Anstelle von position: relative; add position: absolute; bis .dropdown-menu class
Wenn Sie JQUERY verwenden möchten, funktioniert das wie gewünscht.
%Vor%BTW Sie müssen Ihren Off-Fokus schreiben, um festzulegen, wie Sie sich verhalten wollen.
Sie können dies einfach tun, indem Sie die Breite des umschaltbaren Ankerelements zwischen den Dropdown-Ereignisaufrufen beibehalten:
%Vor% WICHTIG : Bitte beachten Sie, dass diese Lösung nur für Bootstrap v3.3.6 und höher funktioniert, da in der Version relatedTarget in Version 3.3.5 und darunter ein Fehler aufgetreten ist.
Jedes Element, das absolut und in einem relativen Container enthalten ist, würde seine Breite vom relativen Container übernehmen. die relative Behälterbreite wäre die 100% für den absoluten Behälter. Die einzige Möglichkeit, das standardmäßige Bootstrap-Verhalten zu ändern, besteht darin, die Containerposition in "static" zu ändern und die Position relativ zum Container anzugeben, dessen Breite Sie für das Dropdown-Element erben möchten.
Tags und Links html css twitter-bootstrap drop-down-menu dropdown