ブートストラップを使ってサイトを作ろうとしていて、やってみようと思っていたドロップダウンメニューを作る機能があることを知りました。ブートストラップのドロップダウンメニューが頑固になっています
私はそれをまったく動作させることができませんでした。私は、私のコードがw3schoolsの例と同じ基盤を持っていることを確認した後、Bootstrap、double、およびtripleがチェックされる前にjQueryリンクを再配置しましたが、ボタンをクリックすると何も起こりませんでした。私は自分のコードをコメントアウトしてその例に置き換えたところまで達しましたが、それでもうまくいきませんでした。
私のCSSファイル（と私は以下のコピーを含む）では、すべてのdivオブジェクトの背景と境界線のプロパティをnoneに、または "1px solid black"という境界線をオーバーライドしました。彼らはどこに着陸しているのでしょうか？私はまた、行のクラスの上下の余白をオーバーライドしました。なぜなら、アイテムが互いに接するようにしようとしていたからです。私はCSSファイルのその部分を削除して、それが問題かどうかを確認するためにページを再読み込みしましたが、問題は変わりませんでした。
私のCSSファイル（および後で書いている空のスクリプトファイル）をすべて削除しても問題は解決されません。
同じ行のすべての列を同じ高さにすることができる追加のブートストラップリンクを削除すると機能しません。
メインリンクから整合性とクロス間隙を取り除くことはできません（私はそのようなリンクを見つけました、私はメーカーの推薦でそれを残すと考えました）。
同時に3つすべてを外しても機能しません。そしてそれはw3schoolsの例でもそれを取り除いています。私は間違ったリンクを疑って、w3schoolsが「小型化されたCSS」のために提案したCDNを使用しました。改善はありません。
私はちょっと気分が悪く、かなり深いところです。私は、必要なhtmlコードだけを用意するつもりです（私はこれまでに何かを試してみることで他にすべてコメントしました）。そして、タイトルバーのために私のcssコードを含めるつもりですしかし、もう一度、私はある時点でHTML文書からファイル全体を裂いた。だから問題がCDNリンクの外でもCSSに関係していたら、私は非常に驚くだろう。
htmlコード（私のドロップダウンメニューコードがコメントアウトされ、アクティブなコードがw3schoolの例からです）：
<!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コード：
/*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;
}
誰もがここで何が起こっているか見ることができる場合は、私は本当にそれを感謝します。私はちょうど私がこれまでずっと長い間見てきたことを望んでおり、本当に小さいものを見逃しています。
問題はなんですか？期待される結果は何ですか？そのコードを実行する際の現在の結果は何ですか？ –
ブートストラップの例では、http：// getbootstrapの方がいいかもしれません。com/components /＃dropdowns – Katie
あなたのコードは私には役立ちますが、どこにブートストラップJSをロードしますか？ – makshh