【发布时间】：2016-11-09 00:05:23
【问题描述】：
所以我尝试使用 Bootstrap 创建一个网站，我看到有一个功能可以创建一个下拉菜单，我本来打算这样做，所以我开始使用它。
我根本无法让它工作。我四处搜索，将我的 jQuery 链接重新安排在 Bootstrap 之前，双重和三重检查我的代码与 w3schools 的示例具有相同的基础，但我没有得到任何点击按钮的动作。我什至到了注释掉我的代码并用他们的示例替换它的地步，但即使这样也没有用。
在我的 css 文件中（我将在下面包含一个副本），我已将所有 div 对象的背景和边框属性覆盖为无，或者设置了“1px 纯黑色”边框，以便我可以看到主体以及他们降落的地方。我还覆盖了行类的顶部和底部边距，因为我试图让项目彼此相邻。我已删除 css 文件的那部分并重新加载页面以查看是否是问题所在，但它并没有改变问题。
剥离我的整个 css 文件（以及我稍后编写的一个空脚本文件）并不能解决问题。
剥离允许我使同一行上的所有列具有相同高度的额外引导链接不起作用。
从主链接中剥离完整性和跨域是行不通的（我找到了这样的链接，我想我会按照制造商的建议保留它）。
同时剥离所有三个是行不通的。这甚至从 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;
}
如果有人能看到这里发生了什么，我将不胜感激。我希望我已经看这个太久了，我错过了一些非常小的东西。
【问题讨论】：
-
到底是什么问题？运行该代码时的预期结果和当前结果是什么？
-
Bootstrap 的例子可能会让你的运气更好：getbootstrap.com/components/#dropdowns
-
你的代码适合我，但是......你在哪里加载 Bootstrap JS？
-
@makshh 就在钱上。我还没有，我没有意识到我需要。我刚插上电源回来，它现在可以工作了。
-
@CharlieFish 我试图获得一个下拉菜单，但我无法让菜单真正下拉，它一直隐藏在后台，只显示按钮。正如我上面提到的，我没有意识到我需要 javascript 链接，一旦我这样做并把它放进去，它就又开始工作了。
标签： html twitter-bootstrap drop-down-menu