Question

我尝试使用Bootstrap制作一个简单的下拉菜单，但它出现在页面底部。出了什么问题？

.dropdown-informatie {
  overflow: hidden;
  float: left;
}
.dropdown-pagina {
  float: left;
  overflow: hidden;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h1> Test </h1>
<p>Test</p>

<div class="dropdown-pagina">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Pagina's <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">Pagina 1</a></li>
    <li role="presentation"><a role="menuitem" href="#">Pagina 2</a></li>
    <li role="presentation"><a role="menuitem" href="#">Pagina 3</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
<div class="dropdown-informatie">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Informatie <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">informatie 1</a></li>
    <li role="presentation"><a role="menuitem" href="#">informatie 2</a></li>
    <li role="presentation"><a role="menuitem" href="#">informatie 3</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>

Answer 1

YOUR NEW CODE

您只需使用"dropdown-pagina"，而不是将dropdown用作课程。然后可以针对特定样式创建pagina和informatie的第二个和第三个类，因为dropdown是已定义的Bootstrap类。

Bootstrap 3下拉列表的结构如下：

div.container {
  margin-top: 20px;
}

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">                                   
  <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>
</div>

</body>

Bootstrap drowdown菜单显示在页面底部

1 个答案: