Question

所以我正在尝试使用Bootstrap创建一个网站，我看到有能力创建一个下拉菜单，我打算继续这样做，所以我跳了它。

我根本无法让它工作。我一直在搜索，重新安排我的jQuery链接在Bootstrap之前，双重和三重检查我的代码与w3schools的例子具有相同的基础，但我没有采取任何行动来点击按钮。我甚至达到了这样的程度，即我将代码注释掉并将其替换为示例，但即使这样也无效。

在我的css文件中（我将在下面包含一个副本），我已将所有div对象的背景和边框属性覆盖为无，或者设置边框为“1px solid black”，这样我就可以看到这些他们降落的地方我也覆盖了行类的顶部和底部边距，因为我试图让项目相互接近。我删除了css文件的那一部分并重新加载页面以查看是否是问题，但它没有改变问题。

剥离我的整个css文件（以及我之后写的空脚本文件）并不能解决问题。

剥离额外的bootstrap链接，允许我将同一行上的所有列设置为相同的高度不起作用。

剥离主链接的完整性和交叉原则不起作用（我发现这样的链接，我想我会按照制造商的推荐离开它。）

同时剥离所有三个不起作用。这甚至可以用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;
}

如果有人能看到这里发生了什么，我真的很感激。我希望我已经看了很长时间，而且我错过了一些非常小的东西。

Answer 1

好的。幸运的是，我发布了这个问题之后就找到了问题。

我无处可见，我需要css和javascript链接。或者至少，只有css链接在html代码中没有帮助，只有当我还添加了javascript代码链接时，才能使下拉菜单与我之前的代码和w3school一起工作。

叫我绿色，但这是我第一次遇到Bootstrap。

Bootstrap下拉菜单很顽固

1 个答案: