So versuche ich Bootstrap, um eine Website zu machen, und ich sah, dass es eine Möglichkeit, ein Dropdown-Menü zu machen, was ich sowieso tun wollte, so sprang ich darauf.Bootstrap Dropdown-Menü ist stur
Ich konnte es überhaupt nicht zur Arbeit bekommen. Ich habe herumgesucht, meinen jQuery-Link neu angeordnet, um vor Bootstrap zu sein, doppelt und dreifach überprüft, dass mein Code die gleiche Basis wie das Beispiel von w3schools hatte, aber ich habe keine Aktion bekommen, um aus dem Klicken auf den Button zu kommen. Ich kam sogar an den Punkt, wo ich meinen Code auskommentierte und durch sein Beispiel ersetzte, aber selbst das hat nicht funktioniert.
In meiner CSS-Datei (und ich werde eine Kopie unten enthalten), habe ich die Hintergrund-und Rahmeneigenschaften aller div-Objekte zu keiner, oder mit einem festgelegten Rahmen von "1px solid black", so dass ich die Körper und wo sie landen. Ich habe auch den oberen und unteren Rand der Zeilenklasse übersteuert, da ich versucht habe, Elemente aneinander gereiht zu haben. Ich habe diesen Teil der css-Datei gelöscht und die Seite neu geladen, um zu sehen, ob dies das Problem war, aber das Problem wurde dadurch nicht geändert.
Das Entfernen meiner gesamten CSS-Datei (und einer leeren Skriptdatei, die ich später schreibe) löst das Problem nicht.
Das Entfernen des zusätzlichen Bootstrap-Links, der es mir ermöglicht, alle Spalten in derselben Zeile mit der gleichen Höhe zu bearbeiten, funktioniert nicht.
Das Entfernen der Integrität und Crossorigin aus dem Hauptlink funktioniert nicht (Ich fand den Link so, ich dachte, ich würde es auf die Empfehlung des Herstellers verlassen).
Das gleichzeitige Entfernen aller drei gleichzeitig funktioniert nicht. Und das ist sogar das Beispiel von w3schools. Ich wurde misstrauisch gegenüber einer schlechten Verbindung und benutzte das CDN, das die Schulen für "verkleinerte CSS" vorgeschlagen hatten. Keine Verbesserung.
Also bin ich ein wenig am Ende des Witzes und ziemlich außerhalb meiner Tiefe. Ich werde nur den notwendigen HTML-Code aufstellen (ich habe alles andere auskommentiert, indem ich versuche, das Ding sowieso zu testen), und ich werde meinen CSS-Code für die Titelleiste einfügen, die nur der Vollständigkeit halber enthalten ist , obwohl, wieder, habe ich die ganze Datei aus dem HTML-Dokument irgendwann reißen. Ich wäre also sehr überrascht, wenn das Problem außerhalb des CDN-Links auch noch etwas mit CSS zu tun hätte.
HTML-Code (mein Drop-Down-Menü-Code wird auf Kommentar, der aktive Code ist aus w3school dem Beispiel):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do Weekly List</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
<link href="format.css" rel="stylesheet" type="text/css" />
<script src="main.js"></script>
</head>
<body>
<!-- <div class="dropdown" id="option-div">
<button id="option-btn" class="btn btn-primary dropdown-toggle" type="button"></button>
<ul class="dropdown-menu">
<li id="pswd-change"><p>Change your password</p></li>
<li id="end-user"><p>Delete your account</p></li>
<li class="divider"></li>
<li id="help"><p>Help</p></li>
</ul>
</div> -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</body>
</html>
CSS-Code:
/*all div's, negating some of bootstrap's formatting*/
div {
position: relative;
background: none !important;
border: 1px solid black !important;
}
/*bootstrap's row class*/
.row{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*the button is within this title bar*/
#title-bar{
background: #b3ffb3 !important;
border: 2px solid grey !important;
}
/*This is the direct css for the button that's commented out*/
button#option-btn{
background: url(https://cdn1.iconfinder.com/data/icons/seo-13/512/settings-128.png);
height: 3rem;
width: 3rem;
background-size: 100%;
position: absolute;
bottom: 1rem;
left: 2rem;
}
/*the div item that held my button (commented out) and had class="dropdown"*/
#option-div{
height: 6rem !important;
width: 6rem !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
}
/*just for the header in the title bar
#header{
font-size: 4rem;
padding: .50rem;
}
Wenn jemand sehen kann, was hier los, Ich würde es wirklich schätzen. Ich hoffe, ich habe mich viel zu lange damit beschäftigt und mir fehlt etwas wirklich Kleines.
Was genau ist das Problem? Was ist das erwartete Ergebnis und was ist das aktuelle Ergebnis bei der Ausführung dieses Codes? –
Vielleicht haben Sie mehr Glück mit Bootstrap Beispiele: http: // getbootstrap.com/components/# dropdowns – Katie
Ihr Code funktioniert für mich, aber ... wo laden Sie Bootstrap JS? – makshh